sass 基础

sass 基础

环境搭建

• 安装ruby
• gem install sass

基础指令

编译:
sass input.scss output.css --style expanded
动态编译单个文件:
sass --watch input.scss:output.css --style expanded
动态编译文件夹:
sass --watch sass/:css/ --style expanded

语法

基本语法

• 嵌套

• 父选择器 &

  &必须作为第一个字符

• 属性嵌套
• 占位符选择器 %

• 多行和单行注释

  /* */ // 单行注释编译时会忽略

SassScript

变量

$myWidth:100px;

.test{
    width:$myWidth;
}

取值

$mytext = "hello"
/*   #{ $mytext }   */

运算

• +, -, *, /, %
• <, >, <=, >=
• ==, !=

函数

@function function-name($args) { 
    @return value-to-be-returned; 
}

参考文档

sass中文网
简书
自定义函数