sass コマンド learning_html/css_WEB-ITnose

書式スタイル

nested      缩进嵌套css （默认的）expanded    没有缩进。扩展的csscompact    简洁格式的csscompressed   压缩之后的css

変数

$blue: #fff;使用#{} 嵌套字符串$side:left;.test{    border-#{$side}-radius:5px}

計算関数

使用 *  /   +     - 进行计算

ネスト

原来代理div h1{    color:red;}// scss 可以这样div{    h1{        color:red;    }}在嵌套里面，可以使用&引用父元素，比如 a:hover的写法a{    &:hover{        color: red;    }}

継承

比如已经有了class1 了.class1{    }这边class2可以继承 class1的.class2{    @extend .class1;}

mixin

对于mixin有点像 c语言里面的宏，可以重用的代码块使用@mixin指令，定义一个代码块@mixin left{    float:left;    margin-left:10px}// 也可以指定参数和缺省值@mixin left($value:10px){    float:left;    margin-left:$value;}

カラー関数

sass 提供一些内置的颜色函数

ファイル挿入

@import 方法

@if 条件判定

@else コマンド

@if 1 + 1 == 2 {  border: 1px solid; }

各ステートメントの / while ステートメントのループ ステートメント

@for $i from 1 to 10 {　　　　.border-#{$i} {　　　　　　border: #{$i}px solid blue;　　　　}　　}　　　　　　　　$i: 6;　　@while $i > 0 {　　　　.item-#{$i} { width: 2em * $i; }　　　　$i: $i - 2;　　}　　

カスタム関数

@funcion double($n){    @return $n * 2;}