Sass
安裝Sass
- 安裝Ruby：
- 安裝Sass:
gem install sass - 安裝Compass:
sudo gem install compass
創(chuàng)建工程
- 使用Sass創(chuàng)建: 隨便創(chuàng)建個文件夾就是使用sass創(chuàng)建了個工程
- 使用Compass創(chuàng)建:
compass create <ProjName>
使用命令行
- 編譯Scss:
sass demo.scss demo.css - 監(jiān)視Sass文件:
sass --watch demo.scss:demo.css - 監(jiān)視文件夾:
sass --watch <sass folder>:<css folder> - 編譯Sass:
compass compile [--force] - 監(jiān)視文件夾:
compass watch - 四種輸出風(fēng)格(style):
nested expanded compact compressed-
sass <sass file> <css file> --style
eg: compass compile [--force] -s compressed
-
定義變量
- 變量:
div { $color: red; color: $color }``` - 全局變量:
$color: red !global; div { color:$color }``` - 默認(rèn)變量:
$fontSize: 16px !default; div { font-size:$fontSize }``` - 多指變量:
$paddings: 2px 3px 4px 5px; div { padding: $paddings; padding-left: nth($paddings,1) } $mapcolors:(redcolor:red, bluecolor:blue); div { color: map-get($mapcolors, redcolor) } - 變量特殊用法:
$classname: container; .#{$classname} { color: red }
導(dǎo)入樣式文件
- 部分文件:
命名'_'開頭 eg:_demo.scss(編譯時不會被生成css文件) - 嵌套導(dǎo)入:
-
@import '_ddemo.scss'
or
@import 'ddemo'
- 原生CSS導(dǎo)入
- 被導(dǎo)入文件的名字以.css結(jié)尾:
@import 'demo.css'; - 被導(dǎo)入文件的名字是一個url地址:
@import 'http://xxx/demo.css'; - 被導(dǎo)入文件的名字是CSS的url()值:
@import url(demo.css);
- 被導(dǎo)入文件的名字以.css結(jié)尾:
嵌套
- 選擇器嵌套
div { span{ color: red } } - 屬性嵌套
div { background: { color: red; size: 100% 50%; } } - & -- 引用父選擇器
a { color: red; &:hover { color: blue } &.content { color: green } } - @at-root 跳出嵌套
默認(rèn)@at-root只會跳出選擇器嵌套吊输，而不能跳出@media或@support堡妒，如果要跳出這兩種，則需使用@at-root(without: media),@at-root(without: support).這個語法的關(guān)鍵詞有四個：all（表示所有）锦担，rule（表示常規(guī)css），media（表示media）损晤，support（表示support）滞磺。默認(rèn)@at-root其實(shí)就是@at-root(without:rule)div { @at-root span { color: yellow } @media screen and (max-width: 600px) { @at-root (without: media) { .container { background: red; } } } @media screen and (max-width: 600px) { @at-root (without: media rule) { .container { background: red; } } } } - @at-root與& 綜合使用
.text-info { color: red; @at-root nav & { color: blue } }
繼承
- 簡單繼承
.div { background: red } .span { @extend .div; color: blue } - 多繼承
- 多個@extend
.dbody { font-size: 16px } .ddiv { background: red } .dspan { //@extend .dbody,.ddiv; @extend .dbody; @extend .ddiv; color: blue }
- 鏈型繼承
.dbody { font-size: 16px } .ddiv { @extend .dbody; background: red } .dspan { @extend .ddiv; color: blue } - 繼承的局限性
- 包含選擇器异旧、相鄰兄弟選擇器 不能被繼承
- 如果被繼承的元素是a，恰巧這個元素a又有hover狀態(tài)的形式佣谐，那么hover狀態(tài)也會被繼承
- 繼承交叉合并:避免使用肚吏，結(jié)果不可預(yù)期
span a { font-size: 18px; } div .content { @extend a; color: red } - 繼承的作用域
.one { color: red } @media screen and (max-width: 600px) { <!-- .one { //is wrong color: blue } --> .two { color: blue } .test { // @extend .one //is wrong; @extend .two //is right } }
占位選擇器 %
```css
%allsty {
margin: 0;
padding: 0
}
.one {
@extend %allsty;
color: red
}
```
數(shù)據(jù)類型
- 數(shù)字類型
$n1: 1.2; $n2: 12; $n3: 12px; p { font-size: $n3 } - 字符串類型
$s1: container; $s2: 'container'; $s3: "container"; p { font-size: $s1 } - boolean類型
$bt: true; $bf: false; p { @if $bt { color: red } } - null類型
$isnull: null; p { @if $isnull==null { color: red } } - color類型
$c1: red; $c2: #fff; $c3: rgba(255, 255, 255, .5); p { color: $c2 } - map類型
$mapcolor: (sblue: blue, sred: red, syellow: yellow); p { color: map-get($mapcolor, sblue) } - list類型
$list:(#b4d455, 42, "awesome"); p { color: nth($list, 1) }
變量操作：== != < > <= => + - * / %
```css
$width1: 10px;
$width2: 15px;
p {
width: $width2 - $width1
}
a:hover {
cursor: e + -resize
}
a::before {
content: "ab" + c
}
a::before {
content: a + "bc"
}
$version: 3;
p::before {
content: "sass version #{$version}"
}
p {
font-size: (20px * 10);
font-size: (20px / 10);
font-size: (20px + 10px);
font-size: (20px - 10);
}
```
mixin
- 簡單示例
@mixin colors { color: red } div { @include colors() } @mixin inst($color:red, $size:16px) { color: $color; font-size: $size } div { @include inst(blue, 18px) } div { @include inst($size: 18px) } div { @include inst() } - 多值參數(shù)
@mixin paddings($pv...) { padding: $pv } div { @include paddings(5px, 6px, 7px, 8px) } - 傳遞內(nèi)容
@mixin style-for-oo($pv...) { div { @content } } @include style-for-oo { font-size: 18px } @include style-for-oo { color: red; font-weight: 200 }
函數(shù)
- 內(nèi)置函數(shù)
p { z-index: str-length($string: "abcdefg"); } p { z-index: str-index($string: "abcdefg", $substring: "cde"); } - 自定義函數(shù)
@function double($width) { @return $width * 2 } p { width: double(10px) }
調(diào)試指令
```css
@debug 'this is debug';
@warn 'this is warn';
@error 'this is error'
```
控制指令和表達(dá)式
- if語句
eg:if( expression, value1, value2 )div { color: if(1+1==2, red, blue) } - @if語句
eg:@if expression { // CSS codes } @else if condition { // CSS codes } @else { // CSS codes }$type: audi; p { @if $type==benz { color: red; } @else if $type==mahindra { color: blue; } @else if $type==audi { color: green; } @else { color: black; } } - @for語句
eg:@for $var from <start> through <end>@for $i from 1 through 4 { .p#{$i} { padding-left : $i * 10px; } }
eg:@for $var from <start> to <end>@for $i from 1 to 4 { .p#{$i} { padding-left : $i * 10px; } } - @each語句
eg:@each $var in <list or map>@each $color in red, green, yellow, blue { .p_#{$color} { background-color: #{$color}; } }
eg:@each $var1, $var2, $var3 ... in <list>@each $color, $border in (aqua, dotted),(red, solid),(green, double){ .#{$color} { background-color : $color; border: $border; } }
eg:@each $var1, $var2 in <map>@each $header, $color in (h1: red, h2: green, h3: blue) { #{$header} { color: $color; } } - 語句
eg:while(condition) { // CSS codes }$i: 50; @while $i>0 { .paddding-#{$i} { padding-left: 1px * $i; } $i: $i - 10; }
