css-preprocessor

How to autoprefix css files generated by less, in Webstorm?

由 删除回忆录丶 提交于 2019-12-22 06:29:09
问题 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

Sass: Using two @each lists in SCSS

由 送分小仙女□ 提交于 2019-12-19 04:18:33
问题 In my CSS I have to create classes that make reference to a 'hair colour' and 'hairstyle' I have written a mixin to help make my CSS writing more efficient: @mixin hair($hair, $colour) { .hair-#{$colour} .#{$hair} { background:image-url("xsppsfhair#{$hair}#{$colour}.svg") center top no-repeat, image-url("xsppsheadgrey.svg") center top no-repeat, image-url("xsppsbhair#{$hair}#{$colour}.svg") center top no-repeat; } } @include hair(spikyboy, blonde); @include hair(curlyafroboy, blonde); This

How to use Sass in Visual Studio 2013 [closed]

由 安稳与你 提交于 2019-12-17 21:41:55
问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 3 years ago . How can I use the Sass CSS preprocessor in Visual Studio 2013 ? Are there any extensions that provide support for Sass? 回答1: Visual Studio 2013 Update 2 Visual Studio 2013 Update 2 has native syntax support for both SCSS and LESS files. You can create SCSS or LESS files and see syntax highlighting and

Error for invalid css when trying to compile sass

由 谁说胖子不能爱 提交于 2019-12-08 01:16:20
问题 I am new to sass, after having downloaded bulma, installed gem, and sass, I tried to compile a default sass file with sass style.scss style.css , here is my directory structure But I get errors likes this: /* Error: Invalid CSS after "$pink": expected selector or at-rule, was ": #ffb3b3 " on line 2 of styles.scss 1: $blue: #72d0eb 2: $pink: #ffb3b3 3: $orange: #FFA500 4: $family-serif: "Georgia", serif 5: 6: $danger: $orange 7: $family-primary: $family-serif Backtrace: styles.scss:2 /usr

HTML/CSS Obfuscation Compiling [closed]

由 谁说胖子不能爱 提交于 2019-12-07 23:11:54
问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 4 years ago . I have a question about obfuscate the final output of an HTML and CSS file. Lets stay I have this HTML code below with the corresponding class names declared in a separate CSSfile: <div class="header"> <div class="logo"></div> <div class="session-info"></div> </div> <div class=

How to autoprefix css files generated by less, in Webstorm?

由 拥有回忆 提交于 2019-12-05 10:44:34
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 node.js script/module that calls less, then autoprefixer. Have the less transpiler output the css with

Repeat dots in LESS / SASS for Content property

由 99封情书 提交于 2019-12-04 03:46:35
问题 Take a look at below CSS styles and i'm planning to use LESS & SASS for two different projects and is this possible in preprocessors . .longDots { content: " ......................................................................................................"; } .shortDots { content: "...................."; } What exactly, I want to do to avoid repeated dots to have it as single dot and that too configurable to change it as -, #, * Something mixin like below. .longDots { content: repeater('

How to compile less/sass files in Visual Studio 2017

由 ☆樱花仙子☆ 提交于 2019-12-03 04:00:40
问题 In VS <= 2015 we can use WebEssentials extension that takes care for compiling the less/sass files for us, but currently it does not support VS 2017. Are you aware of similar extension that can compile less/sass on build? 回答1: WebEssentials is being split up into multiple extensions. I believe the functionality you want is now in the Web Compiler extension. If you want to do it without extensions, you could use a task runner like Gulp. See here for a walkthrough of how to integrate Gulp tasks

How to compile less/sass files in Visual Studio 2017

由 旧城冷巷雨未停 提交于 2019-12-02 17:22:30
In VS <= 2015 we can use WebEssentials extension that takes care for compiling the less/sass files for us, but currently it does not support VS 2017. Are you aware of similar extension that can compile less/sass on build? WebEssentials is being split up into multiple extensions. I believe the functionality you want is now in the Web Compiler extension. If you want to do it without extensions, you could use a task runner like Gulp. See here for a walkthrough of how to integrate Gulp tasks into VS. UPDATE - PLEASE READ DOWN THIS PAGE, AS I HAVE ADDED AN ADDITIONAL ANSWER (THIS ONE NO LONGER

Media queries with sass

由 时间秒杀一切 提交于 2019-12-01 04:17:37
I'm getting errors compiling my sass files using media query mixins. I followed several tutorials, but it won't compile. I'm using Sass 3.3.0.alpha.67 (Bleeding Edge) . Here's my code /* Included at the end */ @mixin mobile-only { @media (max-width : 320px) { @content; } } /* Included where the rest of my sass is */ body { @include mobile-only { display: none; } } I'm using scout to compile and watch for changes. Is there anything else I need to be doing? Doesn't seem to be an issue anymore. The slightly modified code is explained in this codepen http://codepen.io/danielcgold/pen/RRNrPQ .
订阅 css-preprocessor