css-preprocessor

问题 I'm really new to Sass and having problems when importing variables from partial stylesheets. I thought it was pretty straightforward, but it seems not to be the case. I'm using this stylesheet in a react component, importing like this: import '../stylesheets/Table.scss'; The actual stylesheet (simplified, but with the same error) looks like this: @use 'colors.scss'; .datatb-container { background-color: colors.$table-bg; border: 2px solid colors.$table-border; border-radius: 2px; padding: 1

问题 I'm really new to Sass and having problems when importing variables from partial stylesheets. I thought it was pretty straightforward, but it seems not to be the case. I'm using this stylesheet in a react component, importing like this: import '../stylesheets/Table.scss'; The actual stylesheet (simplified, but with the same error) looks like this: @use 'colors.scss'; .datatb-container { background-color: colors.$table-bg; border: 2px solid colors.$table-border; border-radius: 2px; padding: 1

问题 I see this html template, and inspect it using Chrome inspection tool. I'm surprised to know that my browser can detect the scss files instead of the compiled css one. Then, I push Ctrl+U to view the page source, try to find 'scss' but it gives nothing in result. So, how does the browser know the scss files? P.S. I'm new to scss/sass/css pre-processor things 回答1: You can read this article for more about Sourcemaps: https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ This is

问题 Like most I have been concatenating my JS/CSS files into one big file within Gulp, however, with HTTP2 becoming the norm nowadays I thought I would change my gulp file instead to make related "bundles" instead, however am wondering how to manage this in a clean fashion within Gulp. My prior gulpfile.js: var gulp = require('gulp'); var browserSync = require('browser-sync').create(); var concat = require('gulp-concat'); var rename = require('gulp-rename'); var sass = require('gulp-sass'); var

问题 Like most I have been concatenating my JS/CSS files into one big file within Gulp, however, with HTTP2 becoming the norm nowadays I thought I would change my gulp file instead to make related "bundles" instead, however am wondering how to manage this in a clean fashion within Gulp. My prior gulpfile.js: var gulp = require('gulp'); var browserSync = require('browser-sync').create(); var concat = require('gulp-concat'); var rename = require('gulp-rename'); var sass = require('gulp-sass'); var

问题 This works: background-color: ~"@{@{space-name}-color-4}"; This does not: background-color:lighten(~"@{@{space-name}-color-4}",5%); Error: SyntaxError: error evaluating function `lighten`: Object # has no method 'toHSL' in ... Checked questions on SO already and this one seems to be similar: Define variable name with variable in LESS operation Unfortunately this did not work for me, when I used: @color4:~"@{@{space-name}-color-4}"; border: 1px solid @color4; // this works background-color

问题 Let's say I have this HTML5 project on NetBeans 7.4 myproject <---project folder | |-- public_html <---web root (the only visible in Projects tab) | | | |-- css | |-- style.css | |-- scss |-- file1.scss |-- file2.scss |-- more |-- file3.scss I want to configure NetBeans in such way that, when I save any of file1.scss , file2.scss and file3.scss , it compiles all these files into style.css , preferably minified... Is it possible? If so, what should I write in project properties (see image)?

问题 Let's say I have this HTML5 project on NetBeans 7.4 myproject <---project folder | |-- public_html <---web root (the only visible in Projects tab) | | | |-- css | |-- style.css | |-- scss |-- file1.scss |-- file2.scss |-- more |-- file3.scss I want to configure NetBeans in such way that, when I save any of file1.scss , file2.scss and file3.scss , it compiles all these files into style.css , preferably minified... Is it possible? If so, what should I write in project properties (see image)?

问题 I have the following hash: styles = { fontSize: { use: true, values: { sm: .875rem, base: 1rem, lg: 1.125rem, } }, fontWeight: { use: false, values: { light: 300, normal: 400, bold: 700, } } } I would like to create a for in loop that processes the values only if use is set to true. I have this code which will loop through the different style types: for style in styles items = styles[style] for item in items {item} for property, value in items[item] {property} value What I can't figure out is

问题 I've got Webstorm 7 (on Win7) compiling my .less files into minified css with sourcemaps (using lessc on nodejs v0.10.26, run from a File Watcher in Webstorm), and I can then run autoprefixer on that generated css to automatically insert vendor prefixes. What I'm not sure how to do, is combine the two steps. Is it possible to chain File Watchers in Webstorm? Possible approaches: Create a batch script that is called from the file watcher, then calls less and autoprefixer in sequence. Create a