Sass(Syntactically Awesome StyleSheets)

sass安装

npm install -g node-sass

node-sass -w xxx.scss xxx.css –output-style expanded

node-sass 参数:

-w, –watch Watch a directory or file -r, –recursive Recursively watch directories or files -o, –output Output directory -x, –omit-source-map-url Omit source map URL comment from output -i, –indented-syntax Treat data from stdin as sass code (versus scss) -q, –quiet Suppress log output except on error -v, –version Prints version info –output-style CSS output style (nested | expanded | compact | compressed) –indent-type Indent type for output CSS (space | tab) –indent-width Indent width; number of spaces or tabs (maximum value: 10) –linefeed Linefeed style (cr | crlf | lf | lfcr) –source-comments Include debug info in output –source-map Emit source map –source-map-contents Embed include contents in map –source-map-embed Embed sourceMappingUrl as data URI –source-map-root Base path, will be emitted in source-map as is –include-path Path to look for imported files –follow Follow symlinked directories –precision The amount of precision allowed in decimal numbers –importer Path to .js file containing custom importer –functions Path to .js file containing custom functions –help Print usage info

Sass的基本特性

变量

$brand-primary : darken(#428bca, 6.5%) !default; $btn-primary-color : #fff !default; $btn-primary-bg : $brand-primary !default; $btn-primary-border : darken($btn-primary-bg, 5%) !default; .btn-primary { background-color: $btn-primary-bg; color: $btn-primary-color; border: 1px solid $btn-primary-border; }

$baseLineHeight: 2; $baseLineHeight: 1.5 !default; body{ line-height: $baseLineHeight; }

局部变量

$color: orange !default; .block { color: $color; } em { $color: red; a { color: $color; } } span { color: $color; }

嵌套

nav { a { color: red; header & { color:green; } }
}

.box { border: { top: 1px solid red; bottom: 1px solid green; } }

.clearfix{ &:before, &:after { content:””; display: table; } &:after { clear:both; overflow: hidden; } }

不要无节制嵌套,一切都根据实际情况判断

混合宏

@mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; } button{ @include border-radius; }

@mixin border-radius($radius:5px){ -webkit-border-radius: $radius; border-radius: $radius; } .nav{ @include border-radius; } .box{ @include border-radius(3px); }

@mixin center($width,$height){ width: $width; height: $height; position: absolute; top: 50%; left: 50%; margin-top: -($height) / 2; margin-left: -($width) / 2; } .box-center { @include center(500px,300px); }

@mixin box-shadow($shadows…){ @if length($shadows) >= 1 { -webkit-box-shadow: $shadows; box-shadow: $shadows; } @else { $shadows: 0 0 2px rgba(#000,.25); -webkit-box-shadow: $shadow; box-shadow: $shadow; } } .box { @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2)); }

混合宏会生成冗余代码

扩展/继承

.btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; }

.btn-primary { background-color: #f36; color: #fff; @extend .btn; }

.btn-second { background-color: orange; color: #fff; @extend .btn; }

不会生成冗余代码

占位符

%mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; } .btn { @extend %mt5; @extend %pt5; }

mt5 和 pt5 并不会生成最终代码

插值#{}

允许在#{}内部解析变量

$properties: (margin, padding); @mixin set-value($side, $value) { @each $prop in $properties { #{$prop}-#{$side}: $value; } } .login-box { @include set-value(top, 14px); }

注释

1.类似 CSS 的注释方式，使用 ”/* ”开头. 2.类似 JavaScript 的注释方式，使用“//”

两者区别，前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示

数据类型

Sass 和 JavaScript 语言类似，也具有自己的数据类型，在 Sass 中包含以下几种数据类型： 1.数字: 如，1、 2、 13、 10px； 2.字符串：有引号字符串或无引号字符串，如，”foo” ‘bar’ baz； 3.颜色：如， blue , #04a3f9 , rgba(255,0,0,0.5) ; 4.布尔型：如， true , false ； 5.空值：如， null ； 6.值列表：用空格或者逗号分开，如， 1.5em 1em 0 2em , Helvetica, Arial, sans-serif

运算

.box { width: 20px + 8in; } $full-width: 960px; $sidebar-width: 200px; .content { width: $full-width - $sidebar-width; } .box { width: 10px * 2; } .box { width: (100px / 2);
} p { font: 10px/8px; // 纯 CSS，不是除法运算 $width: 1000px; width: $width/2; // 使用了变量，是除法运算 width: round(1.5)/2; // 使用了函数，是除法运算 height: (500px/2); // 使用了圆括号，是除法运算 margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算 } .box { width: ((220px + 720px) - 11 * 20 ) / 12 ;
} p { color: #010203 + #040506; background-color: #010203 * 2; }

$content: “Hello” + “” + “Sass!”; .box:before { content: “ #{$content} “; }

4.Sass高级特性

@if

@mixin blockOrHidden($boolean:true) { @if $boolean { display: block; } @else { display: none; } } .block { @include blockOrHidden; } .hidden{ @include blockOrHidden(false); }

@for

@for $i from through @for $i from to @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } @for $i from 1 to 3 { .item-#{$i} { width: 2em * $i; } }

$grid-prefix: span !default; $grid-width: 60px !default; $grid-gutter: 20px !default;

%grid { float: left; margin-left: $grid-gutter / 2; margin-right: $grid-gutter / 2; } @for $i from 1 through 12 { .#{$grid-prefix}#{$i}{ width: $grid-width * $i + $grid-gutter * ($i - 1); @extend %grid; }
}

@each

$list: adam john wynn mason kuroir; //$list 就是一个列表 @mixin author-images { @each $author in $list { .photo-#{$author} { background: url(“/images/avatars/#{$author}.png”) no-repeat; } } } .author-bio { @include author-images; }

1. Sass中的函数

@function double($n) { @return $n * 2; } #sidebar { width: double(5px); }

全部的内置函数

• 字符串函数
• unquote
• quote
• To-upper-case
• To-lower-case
• percentage

.footer{ width : percentage(.2) }

• round
• ceil
• floor
• abs
• min
• max

• random

• 列表函数
• length 取列表数据的长度
• nth (10px 20px 30px, 1)
• join join(10px 20px, 30px 40px)
• append append(10px 20px ,30px)
• zip zip(1px 2px 3px,solid dashed dotted,green blue red)
• index index(1px solid red, solid)
• type-of type-of(100)
• unit 取单位
• unitless 判断一个值是否带有单位
• comparable 判断两个数是否可以进行加减合并
• if(true,1px,2px)

•Maps 函数 * map-get * map-has-key * map-keys * map-values * map-merge * map-remove * keywords

$map: ( $key1: value1, $key2: value2, $key3: value3 )

$map: ( key1: value1, key2: ( key-1: value-1, key-2: value-2, ), key3: value3 );

$theme-color: ( default: ( bgcolor: #fff, text-color: #444, link-color: #39f ), primary:( bgcolor: #000, text-color:#fff, link-color: #93f ), negative: ( bgcolor: #f36, text-color: #fefefe, link-color: #d4e ) );

$social-colors: ( dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee ); .btn-dribble{ color: map-get($social-colors,facebook); } 没有值不会报错 .btn-weibo{ font-size: 12px; color: map-get($social-colors,weibo); }

map中的容错函数 @function colors($color){ @if not map-has-key($social-colors,$color){ @warn “No color found for #{$color} in $social-colors map. Property omitted.”; } @return map-get($social-colors,$color); } .btn-dribble { color: colors(dribble); }

each 遍历 map @each $name in map-keys($social-colors){ .btn-#{$name}{ color: colors($name); } } @for $i from 1 through length(map-keys($social-colors)){ .btn-#{nth(map-keys($social-colors),$i)} { color: colors(nth(map-keys($social-colors),$i)); } }

map-values($social-colors) /得到所有的值/

$color: ( text: #f36, link: #f63, border: #ddd, backround: #fff ); $typo:( font-size: 12px, line-height: 1.6 ); $newcolor = map-merge($color, $typo);

得到新值 $map:map-remove($social-colors,dribble);

颜色函数 * rgb

• rgba
• red
• green

• blue

• mix 混合两种颜色 第三个参数为第一种颜色的比例 mix(blue,red,20%)

• lighten lighten(red, 20%);

• darken darken(red,30%);

• saturate 改变颜色的饱和度 参数单位为百分比 saturate(blue,20%)

• desaturate

• adjust-hue 通过调整色相 adjust-hue(blue,30deg)

• grayscale 直接让饱和度为0 grayscale(blue);
• alpha 获取透明度
• opacity 获取透明度
• rgba
• opacify 增加透明度
• fade-in 增加透明度
• transparentize 减少透明度
• fade-out 减少透明度

• ...

• …

• …

• …

• …

• …

$redBase: #DC143C; $orangeBase: saturate(lighten(adjust_hue($redBase, 39), 5), 7);//#f37a16 $yellowBase: saturate(lighten(adjust_hue($redBase, 64), 6), 13);//#fbdc14 $greenBase: desaturate(darken(adjust_hue($redBase, 102), 2), 11);//#73c620 $blueBase: saturate(darken(adjust_hue($redBase, 201), 2), 1);//#12b7d4 $purpleBase: saturate(darken(adjust_hue($redBase, 296), 2), 1);//#a012d4 $blackBase: #777; $bgc: #fff;

//定义颜色变暗的 mixin @mixin swatchesDarken($color) { @for $i from 1 through 10 { $x:$i+11; li:nth-child(#{$x}) { $n:$i5; $bgc:darken($color,$n); //颜色变暗 background-color: $bgc; &:hover:before { //hover状态显示颜色编号 content: “#{$bgc}”; color: lighten($bgc,40); font-family: verdana; font-size: 8px; padding: 2px; } } } } //定义颜色变亮的 mixin @mixin swatchesLighten($color) { @for $i from 1 through 10 { $x:11-$i; li:nth-child(#{$x}) { $n:$i5; $bgc:lighten($color,$n); background-color: $bgc; &:hover:before { content: “#{$bgc}”; color: darken($bgc,40); font-family: verdana; font-size: 8px; padding: 2px; } } } }

.swatches li {
width: 4.7619047619%; float: left; height: 60px; list-style: none outside none; }

ul.red { @include swatchesLighten($redBase); @include swatchesDarken($redBase); li:nth-child(11) { background-color: $redBase; } }

ul.orange { @include swatchesLighten($orangeBase); @include swatchesDarken($orangeBase); li:nth-child(11) { background-color: $orangeBase; } }

ul.yellow { @include swatchesLighten($yellowBase); @include swatchesDarken($yellowBase); li:nth-child(11) { background-color: $yellowBase; } }

ul.green { @include swatchesLighten($greenBase); @include swatchesDarken($greenBase); li:nth-child(11) { background-color: $greenBase; } }

ul.blue { @include swatchesLighten($blueBase); @include swatchesDarken($blueBase); li:nth-child(11) { background-color: $blueBase; } }

ul.purple { @include swatchesLighten($purpleBase); @include swatchesDarken($purpleBase); li:nth-child(11) { background-color: $purpleBase; } }

ul.black { @include swatchesLighten($blackBase); @include swatchesDarken($blackBase); li:nth-child(11) { background-color: $blackBase; } }

6.Sass的@规则

•@import

•@media

.sidebar { width: 300px; @media screen and (orientation: landscape) { width: 500px; } } @media screen { .sidebar { @media (orientation: landscape) { width: 500px; } } }

$media: screen; $feature: -webkit-min-device-pixel-ratio; $value: 1.5;

@media #{$media} and ($feature: $value) { .sidebar { width: 500px; } }

•@extend

•@at-root

•@debug

•@warn

•@error

•@content

$small : 750px; @mixin onsmall { @media only screen and (max-width: $small){ @content; } }

.navbar-content{ max-width:980px; @include onsmall { min-width:320px; } }