1. Sass簡介
Sass 是一種css預(yù)處理器,CSS 預(yù)處理器定義了一種新的語言捻脖，其基本思想是上鞠，用一種專門的編程語言尺借，為 CSS 增加了一些編程的特性份汗，將 CSS 作為目標生成文件盈电，然后開發(fā)者就只要使用這種語言進行編碼工作。
除了sass還有一些其他常見的預(yù)處理語言
- LESS
- Stylus
Sass 有時候也被稱為 SCSS,兩者之間不同之處有以下兩點：
- 文件擴展名不同杯活，Sass 是以“.sass”后綴為擴展名匆帚，而 SCSS 是以“.scss”后綴為擴展名
- 語法書寫方式不同，Sass 是以嚴格的縮進式語法規(guī)則來書寫旁钧，不帶大括號({})和分號(;)吸重，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似。
來看一個示例：
/* Sass 語法 */
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
/* Scss 語法 */
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
編譯出來的 CSS
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
scss文件中可以完全像寫正常的css那樣去寫.
2. sass安裝
npm install -g node-sass
node-sass -w xxx.scss xxx.css --output-style expanded
node-sass 參數(shù):
-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
3. 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;
}
}
不要無節(jié)制嵌套,一切都根據(jù)實際情況判斷
混合宏
@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 并不會生成最終代碼
插值#{}
允許在#{}內(nèi)部解析變量
$properties: (margin, padding);
@mixin set-value($side, $value) {
@each $prop in $properties {
#{$prop}-#{$side}: $value;
}
}
.login-box {
@include set-value(top, 14px);
}
注釋
- 類似 CSS 的注釋方式歪今，使用 ”/* ”開頭嚎幸，結(jié)屬使用 ”*/ ”
- 類似 JavaScript 的注釋方式，使用“//”
兩者區(qū)別寄猩，前者會在編譯出來的 CSS 顯示嫉晶，后者在編譯出來的 CSS 中不會顯示
數(shù)據(jù)類型
Sass 和 JavaScript 語言類似，也具有自己的數(shù)據(jù)類型田篇，在 Sass 中包含以下幾種數(shù)據(jù)類型：
- 數(shù)字: 如替废，1、 2斯辰、 13舶担、 10px；
- 字符串：有引號字符串或無引號字符串彬呻，如衣陶，"foo" 'bar' baz；
- 顏色：如闸氮，
blue,#04a3f9,rgba(255,0,0,0.5); - 布爾型：如剪况，
true,false； - 空值：如蒲跨，
null译断； - 值列表：用空格或者逗號分開，如或悲，
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; // 使用了函數(shù)，是除法運算
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 <start> through <end>
@for $i from <start> to <end>
@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;
}
5. Sass中的函數(shù)
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
全部的內(nèi)置函數(shù)
-
字符串函數(shù)
- unquote
- quote
- To-upper-case
- To-lower-case
- percentage
.footer{ width : percentage(.2) }
- round
- ceil
- floor
- abs
- min
- max
- random
-
列表函數(shù)
- length 取列表數(shù)據(jù)的長度
- 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 判斷兩個數(shù)是否可以進行加減合并
- if(true,1px,2px)
-
Maps 函數(shù)
- 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 ) );/* map-get */ $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中的容錯函數(shù) */ @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);
-
顏色函數(shù)
rgb
rgba
red
green
blue
mix 混合兩種顏色 第三個參數(shù)為第一種顏色的比例 mix(blue,red,20%)
lighten lighten(red, 20%);
darken darken(red,30%);
saturate 改變顏色的飽和度 參數(shù)單位為百分比 saturate(blue,20%)
desaturate
adjust-hue 通過調(diào)整色相 adjust-hue(blue,30deg)
grayscale 直接讓飽和度為0 grayscale(blue);
alpha 獲取透明度
opacity 獲取透明度
rgba
opacify 增加透明度
fade-in 增加透明度
transparentize 減少透明度
fade-out 減少透明度
<ul class="swatches red"> <li></li> ... <li></li> </ul> <ul class="swatches orange"> <li></li> … <li></li> </ul> <ul class="swatches yellow"> <li></li> … <li></li> </ul> <ul class="swatches green"> <li></li> … <li></li> </ul> <ul class="swatches blue"> <li></li> … <li></li> </ul> <ul class="swatches purple"> <li></li> … <li></li> </ul>$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:$i*5; $bgc:darken($color,$n); //顏色變暗 background-color: $bgc; &:hover:before { //hover狀態(tài)顯示顏色編號 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:$i*5; $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的@規(guī)則
@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; } }
@mixin useRem($size){
$device-list : 320px, 375px , 414px;
html{
@each $device in $device-list{
@media screen and (min-width: $device){
font-size: 100px * ($device/$size);
}
}
}
}
@include useRem(750px);
