Sass 笔记

发表于   |  

变量以$开头，如$var；字符串中使用变量，要用#{}括起来

标准的css注释/* comment */编译后保留，单行注释// comment编译后忽略

用@import引入外部文件

%开头的选择器是placeholder selector，编译后忽略

mixin类似宏，是可重用的代码块，可以指定参数和默认值；用@mixin定义，用@include引用。用@extend继承css类，编译后会在父选择器声明处添上子选择器名。应该多用组合（@mixin）少用继承（@extend），只有当selector间确实存在继承关系时才用继承。

嵌套selectors

默认由空格拼接外内selector名

1
2
3
.item {
  > .item-name { ... }    =>    .item > .item-name { ... }
}

使用&则直接引用该selector名

1
2
3
.item {
  &-name { ... }    =>    .item-name { ... }
}

编译bootstrap

定制bootstrap

v3版用bootstrap-sass（npm install bootstrap-sass），先拷贝assets/stylesheets/bootstrap/_variables.scss成_customVariables.scss，再引用bootstrap，最后再引用其他自定义的样式

1
2
3
@import 'customVariables';
@import 'path-to-bootstrap-sass/assets/stylesheets/bootstrap';
@import 'otherCustomStyles';

可使用path-to-bootstrap-sass/assets/stylesheets/bootstrap/mixins/中的@mixin，如make-row()、make-*-column()、button-variant()等

webpack打包

webpack中使用bootstrap-loader打包bootstrap，配置jQuery时先npm install jquery，然后用说明中的imports-loader，或者用new webpack.ProvidePlugin({ jQuery: 'jquery' })

工具

用CodeKit来自动编译scss，并实时刷新页面

参考

另：less语法

变量以@开头，如@var，定义和使用都是@var

mixin定义时形如.mixin-name(@param1: default1, ...)，使用时形如.minxin-name(...)

嵌套selectors，与sass相同

参考