Sass
安装Sass
- 安装Ruby：
- 安装Sass:
gem install sass - 安装Compass:
sudo gem install compass
创建工程
- 使用Sass创建: 随便创建个文件夹就是使用sass创建了个工程
- 使用Compass创建:
compass create <ProjName>
使用命令行
- 编译Scss:
sass demo.scss demo.css - 监视Sass文件:
sass --watch demo.scss:demo.css - 监视文件夹:
sass --watch <sass folder>:<css folder> - 编译Sass:
compass compile [--force] - 监视文件夹:
compass watch - 四种输出风格(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 }``` - 默认变量:
$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 }
导入样式文件
- 部分文件:
命名'_'开头 eg:_demo.scss(编译时不会被生成css文件) - 嵌套导入:
-
@import '_ddemo.scss'
or
@import 'ddemo'
- 原生CSS导入
- 被导入文件的名字以.css结尾:
@import 'demo.css'; - 被导入文件的名字是一个url地址:
@import 'http://xxx/demo.css'; - 被导入文件的名字是CSS的url()值:
@import url(demo.css);
- 被导入文件的名字以.css结尾:
嵌套
- 选择器嵌套
div { span{ color: red } } - 属性嵌套
div { background: { color: red; size: 100% 50%; } } - & -- 引用父选择器
a { color: red; &:hover { color: blue } &.content { color: green } } - @at-root 跳出嵌套
默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root(without: media),@at-root(without: support).这个语法的关键词有四个：all（表示所有），rule（表示常规css），media（表示media），support（表示support）。默认@at-root其实就是@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状态的形式，那么hover状态也会被继承
- 继承交叉合并:避免使用，结果不可预期
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
}
```
数据类型
- 数字类型
$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() } - 多值参数
@mixin paddings($pv...) { padding: $pv } div { @include paddings(5px, 6px, 7px, 8px) } - 传递内容
@mixin style-for-oo($pv...) { div { @content } } @include style-for-oo { font-size: 18px } @include style-for-oo { color: red; font-weight: 200 }
函数
- 内置函数
p { z-index: str-length($string: "abcdefg"); } p { z-index: str-index($string: "abcdefg", $substring: "cde"); } - 自定义函数
@function double($width) { @return $width * 2 } p { width: double(10px) }
调试指令
```css
@debug 'this is debug';
@warn 'this is warn';
@error 'this is error'
```
控制指令和表达式
- 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; }
