libsass

Netbeans与基于libsass的SASS编译器不兼容的解决办法

戏子无情 提交于 2020-12-14 08:18:26
问题 Could not find an option named "cache-location". 如果你在Netbeans 10、11、12上使用基于libsass的任何一款SASS编译器来编译scss文件,比如来自 https://sass-lang.com 的sass编译器,你会遇到上面的那个问题,而且scss不会被编译。 导致问题的原因 简单的说,Netbeans 10、11、12被Apache incubator重构之后,与SASS集成的这部分功能是基于Ruby SASS来做的可用性测试,并非libsass。所以当你尝试使用基于libsass的SASS编译器时可能会出问题。 解决办法 解决办法很简单,就是在netbeans的启动参数中添加一个配置项,以在Netbeans上启用基于libsass的编译器。方法如下: 找到Netbeans.conf文件,此文件位于Netbeans安装目录下的etc文件夹中。<nb_install_dir>/netbeans/etc 在netbeans.conf文件中找到“netbeans_default_options”配置项。此项的配置参数众多,你只需要将用于激活libsass支持的配置参数放在最后面即可。如下所示: netbeans_default_options="-J-XX:+UseStringDeduplication -J

CSS 预编译语言 Sass 快速入门教程

Deadly 提交于 2020-10-27 18:37:03
1、CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量、函数、继承等机制,因此很容易写出大量没有逻辑、难以复用和扩展的代码,在日常开发使用中,如果没有完善的编码规范,编写的 CSS 代码会非常冗余且难以维护。 为了解决上述问题,出现了很多 CSS 预编译语言,CSS 预编译语言是基于 CSS 语言的语法扩展,除了能解决上述缺乏语言特性带来的问题之外,还支持嵌套书写,减少重复输入父级选择器(可理解为 CSS 中的继承机制),提高了代码的可读性和编写效率,常见的预编译语言有 Less、Sass 等。 Sass 与 Less 等其它预编译语言不存在优劣之分,一般来说,Sass 的功能更加强大或者说 Sass 的语言层面更接近于一门完整的编程语言,而 Less 则更接近于 CSS 语法,所以我们在 Vue 中通常会使用 Sass 编写样式代码,Laravel 默认提供的样式代码也是 scss 结尾的,也是使用的 Sass 语言。所以我们来了解下 Sass 的安装和使用,非常简单,即学即用。 2、Sass 简介和安装 Sass 是对 CSS 的扩展,让 CSS 语言更强大、优雅。它允许你使用变量、嵌套规则、混合、导入等众多功能,并且完全兼容 CSS 语法。 Sass 具有两种不同的后缀名分别对应两套语法,最早 Sass

BundleTransformer LibSass Could not be found error

╄→гoц情女王★ 提交于 2019-12-24 11:15:52
问题 I want to use BundleTransformer. I've followed all the steps stated in the docs, but still don't work. I've installed: BundleTransformer.SassAndScss BundleTransformer.Autoprefixer LisSassHost LibSassHost.Native.win-x64 JavaScriptEngineSwitcher.V8 Here is my config: <bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd"> <autoprefixer cascade="true"> <jsEngine name="V8JsEngine" /> <browsers> <add conditionalExpression="> 5%" /> <add conditionalExpression="last 2

Gulp Sass not compiling partials

心不动则不痛 提交于 2019-12-19 19:31:44
问题 So I am using Gulp Sass with gulp-changed (i've also tried gulp-newer with the updated syntax changes) and watching all the scss files in my folders. When I change a base scss file it will compile without any problems. However if I change a partial it won't compile the sass file that has a dependency on that partial. Gulp var SRC = './stylesheets/**/*.scss'; var DEST = './stylesheets'; gulp.task('sass', function() { return gulp.src(SRC) .pipe(changed(DEST, { extension: '.css' })) .pipe

Gulp Sass not compiling partials

 ̄綄美尐妖づ 提交于 2019-12-19 19:30:11
问题 So I am using Gulp Sass with gulp-changed (i've also tried gulp-newer with the updated syntax changes) and watching all the scss files in my folders. When I change a base scss file it will compile without any problems. However if I change a partial it won't compile the sass file that has a dependency on that partial. Gulp var SRC = './stylesheets/**/*.scss'; var DEST = './stylesheets'; gulp.task('sass', function() { return gulp.src(SRC) .pipe(changed(DEST, { extension: '.css' })) .pipe

How can I specify a resource root for SCSS includes in my Webpack sass-loader config?

假装没事ソ 提交于 2019-12-12 17:36:59
问题 Say I have something like: { test: /\.scss$/, exclude: /node_modules/, loaders: ['style-loader', 'css-loader', 'sass-loader'] } in my webpack config and I have a app/ sub folder with all my SCSS and JS files in. Currently to import an SCSS partial I have to @import 'app/whatever/my_partial'; for it to be recognised. How can I set the loader to treat app/ as a resource root for these files so I can just say @import 'whatever/my_partial' ? This is with Webpack 2.x btw. Any help from you clever

Error: The `libsass` binding was not found

爱⌒轻易说出口 提交于 2019-12-12 04:02:43
问题 Running express app using node-sass-middleware give me this error on ubuntu: 0 info it worked if it ends with ok 1 verbose cli [ '/home/mohamed/.nvm/versions/node/v0.12.7/bin/node', 1 verbose cli '/home/mohamed/.nvm/versions/node/v0.12.7/bin/npm', 1 verbose cli 'start' ] 2 info using npm@2.11.3 3 info using node@v0.12.7 4 verbose run-script [ 'prestart', 'start', 'poststart' ] 5 info prestart arabicoders@3.3.1 6 info start arabicoders@3.3.1 7 verbose unsafe-perm in lifecycle true 8 info

Getting Libsass Gulp Susy to work together

拈花ヽ惹草 提交于 2019-12-08 08:43:31
问题 I have just spent the last 5 days playing with this and trying to get the following to work together: ¬ Libsass ¬ Susy ¬ Gulp But now I have it working I have just gone for 45s to 700ms This is something I feel I should share. Initial Problem Gulp gulp.task('sass', function () { return gulp.src('./frontend/sass/style.scss') .pipe(sass({ 'require':'susy' })) .pipe(gulp.dest('./app/www/css')) }); Sass @import "susy"; Inital Error [23:58:08] Starting 'sass'... stream.js:94 throw er; // Unhandled

Command-line argument as var in Sass, for hardcoded CDN URL's on compile

蹲街弑〆低调 提交于 2019-12-02 07:34:45
问题 For local HTML/Sass/Css developement we use libsass (via Grunt) to compile our Sass files to Css. The Css background-image URL's are root relative. Sass $dir-img: /img; .header { background-image: url(#{$dir-img}/header.jpg); } We'd like to change the URL to use a CDN when compiling for production server: background-image: url(http://media.website.com/img/header.jpg); Is there some solution to pass-in a command-line argument TO Sass so Sass can use a Sass @IF to switch the root-relative URL's

Command-line argument as var in Sass, for hardcoded CDN URL's on compile

三世轮回 提交于 2019-12-02 05:47:24
For local HTML/Sass/Css developement we use libsass (via Grunt) to compile our Sass files to Css. The Css background-image URL's are root relative. Sass $dir-img: /img; .header { background-image: url(#{$dir-img}/header.jpg); } We'd like to change the URL to use a CDN when compiling for production server: background-image: url(http://media.website.com/img/header.jpg); Is there some solution to pass-in a command-line argument TO Sass so Sass can use a Sass @IF to switch the root-relative URL's to hard-coded CDN like URL's. Something like: Command-line: grunt sass:dist --cdnurl="http://media