认识sass和webstrom的sass配置
我纳闷啊!电脑死机,我刚才编写的内容全没了。
呵呵!
一.sass的使用
1.首先要到官网下载个稳定的ruby版本,因为sass运行是需要ruby环境
它安装的方法也不难。
只需要输入如下代码就行
gem install sass
2.接着在webstrom上设置,搜索栏输入file watchers,新建
然后根据相应的地方输入如下代码
program:
F:\Program Files (x86)\Ruby24-x64\bin\scss.bat
arguments:
--no-cache
--update
--sourcemap
--watch
$FileName$:$FileNameWithoutExtension$.css
output paths to refresh:
Output paths to refresh:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
3,一路确认就可以实现自动在scss文件下自动生成.css和.css.map文件了。
题外话:less实现在css文档下自动生成自动生成.css和.css.map文件,需要修改一下配置
arguments:
$FileName$
$FileParentDir$\css\$FileNameWithoutExtension$.css
--source-map
output paths to refresh:
lessc style.less ../css/style.css --source-map
二。认识 sass
它旧的版本是以缩进的形式编写的。
1.变量
Sass 的变量必须是 $ 开始,然后变量名和值使用冒号隔开,跟 CSS 的属性一致:
$base0:20px; $base1:$base0+40px; $global-color:blue; header{ background:$global-color; padding:$base1; }
我是直接拷贝我前一份日记的代码,把@改为$.而生成的css样式是这样的:
header { background: blue; padding: 60px; }
2.Mixins (混入)
sass中可用mixin定义一些代码片段,且可传参数,方便日后根据需求调用
先放出less的代码便于对比
@base0:20px; @base1:@base0+40px; @global-color:blue; .bor-radius (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } header{ background:@global-color; padding:@base1; .bor-radius(30px); } #div1{ background:pink; .bor-radius; }
而sass需要两个关键字@mixin @include来定义和调用函数
$base0:20px; $base1:$base0+40px; $global-color:blue; @mixin bor-radius ($radius: 5px) { border-radius: $radius; -webkit-border-radius: $radius; -moz-border-radius: $radius; } header{ background:$global-color; padding:$base1; @include bor-radius(30px); } #div1{ background:pink; @include bor-radius(); }
可以发现在less中,定义函数的方法是直接原生css的形式(以.xxx的形式定义函数的。)
.bor-radius (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; }
而sass中,则是
@mixin bor-radius ($radius: 5px) { border-radius: $radius; -webkit-border-radius: $radius; -moz-border-radius: $radius; }
在调用的时候,less直接调用
#div1{ background:pink; .bor-radius; }
而在sass中,是要使用@include关键字调用
#div1{ background:pink; @include bor-radius(); }
而且sass是保留函数模式的(),而less默认参数时,是没有括号的。
3.继承
而在继承方面,我认为less更原生。更接近于css。无论是函数mixin还是继承都是直接嵌套调用。
而在sass还是需要使用关键字@extend
@extend来声明继承的。
#div1{ background:pink; @include bor-radius(); } header{ @extend #div1; text-decoration: dashed; }
生成的css
#div1, header { background: pink; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } header { text-decoration: dashed; }
3.嵌套和导入@import
嵌套和导入也没发现有什么不一样的。
bootstrap现在改用sass,而且现在sass一直在维护。我决定选择可口可乐(sass),而不选择百事可乐(less)