Sass

问题 I'm setting up a Gatsby Project with gatsby-plugin-sass . my gatsby-config.js file: module.exports = { plugins: [ 'gatsby-plugin-resolve-src', 'gatsby-plugin-sass', 'gatsby-plugin-react-helmet', { resolve: `gatsby-source-filesystem`, options: { name: `images`, path: `${__dirname}/src/assets/images`, }, }, ], } I have the following styles file structure : | |src |-styles |--base |--- _variables.scss |--components |--- _Buttons.scss |--- ... |--main.scss Im my _Buttons.scss file I'm importing

问题 I have a rails project which uses twitter bootstrap and sass. The scss files are structured into folders so I have a better overview. Now I want to define a file for global variables which contains my colors etc. and pass those values down to other files so I have less redundant code. While all code is properly imported and applied, variables don't work. Here is the current setup: stylesheets/application.css.scss /* *= require_self *= require_tree */ /* stylesheets/ | |– base/ | |– _reset

问题 I have a rails project which uses twitter bootstrap and sass. The scss files are structured into folders so I have a better overview. Now I want to define a file for global variables which contains my colors etc. and pass those values down to other files so I have less redundant code. While all code is properly imported and applied, variables don't work. Here is the current setup: stylesheets/application.css.scss /* *= require_self *= require_tree */ /* stylesheets/ | |– base/ | |– _reset

问题 I need to generate css based on sass variables. How to turn this: $themes: ( light: ( text: black ), dark: ( text: white ) ); .foo { display: flex; color: @include themify('text'); } Into this: .foo { display: flex; } .light .foo { color: #000; } .dark .foo { color: #fff; } Any ideas of how to implement this? 回答1: You can't reuse the color declaration using a mixin, so instead, you need to pass it to the mixin. Check that out $themes: ( light: ( text: black ), dark: ( text: white ) ); @mixin

问题 I need to generate css based on sass variables. How to turn this: $themes: ( light: ( text: black ), dark: ( text: white ) ); .foo { display: flex; color: @include themify('text'); } Into this: .foo { display: flex; } .light .foo { color: #000; } .dark .foo { color: #fff; } Any ideas of how to implement this? 回答1: You can't reuse the color declaration using a mixin, so instead, you need to pass it to the mixin. Check that out $themes: ( light: ( text: black ), dark: ( text: white ) ); @mixin

问题 Looking to achieve a dimmed-background effect by dimming (or changing the opacity of) all elements on the page but one; I've been trying out :not() as well as some jQuery selectors to try and exclude all but the element, but to no avail. Does anyone know of the best way to do this with SASS/Compass or, failing that, jQuery? So far, I've tried things like: .opacityFade:not(.classToExclude) { STYLES HERE } or $('controlElement').click(function(){ $(body).not('desiredTargetToExclude')

问题 I am trying to add a variable to my scss files, referenced to .env variable. To achieve this, I've read a few tutorials, and I found this. I need to add this configuration to my next.config.js const withImages = require('next-images'); module.exports = withImages({ webpack(config, options) { config.module.rules.push({ test: /\.s[ac]ss$/i, use: [ { loader: "css-loader", options: { importLoaders: 2, modules: { compileType: 'module' } } }, { loader: 'sass-loader', options: { additionalData: `

问题 I am trying to add a variable to my scss files, referenced to .env variable. To achieve this, I've read a few tutorials, and I found this. I need to add this configuration to my next.config.js const withImages = require('next-images'); module.exports = withImages({ webpack(config, options) { config.module.rules.push({ test: /\.s[ac]ss$/i, use: [ { loader: "css-loader", options: { importLoaders: 2, modules: { compileType: 'module' } } }, { loader: 'sass-loader', options: { additionalData: `

问题 I've a _color.scss file which consists of 400 colors as variables. And I've like 20 components which needs this color variables in their styles. I'm using SCSS + CSS Modules to construct my styles. As of now, I'm importing this _color.scss in each and every component's style.scss . Example: component1.scss @import "color.scss"; component2.scss @import "color.scss"; component3.scss @import "color.scss"; Previously, when I was using SCSS standalone, I'll import the color.scss to my index.scss

问题 I have noticed one thing. On some sites such as tray.io, asana, fb etc They have random characters in css class names when you inspect them for example: <header class="Header_XSDsdksdXKkSDD">..</Header> Why are these characters generated and how are they generated? Thanks. 回答1: Those class names or identifiers are probably generated by the engine that produces the page output. If you want to add a style to a particular element, you want a unique class for it - the easiest way is to generate