sass知識點

@charset "utf-8";

//中文註釋

//一、變量(變量分爲局部變量和全局變量)

//位置也須要注意，不能放在使用這個變量以後

//

$highlight-color:#fff;

// 全局變量

//嵌套(避免重複輸入父選擇器)

//分爲選擇器嵌套，屬性嵌套

#index{ 

a{ background-color: $highlight-color; }

h1{ background-color: $highlight-color; }

}

//父選擇器&符號($符號能夠指代父選擇器)

a{

background-color: $highlight-color;

&:hover{ color:#fff; }

}

// &必須做爲第一個字符，能夠隨後綴生成複合選擇器

#index {

&-banner{

width:100%;

}

}

//屬性嵌套

.index{ 

font:20px/24px{

weight:bold;

}

}

// 局部變量只能在嵌套規則內使用,要想把局部變量變成全局變量

// !global

// 

// !default(若是變量後面加上這個聲明，若是變量已經被賦值，不會再被從新賦值，可是若是變量尚未被賦值，則會被賦予新的值)

div{

background-color:$highlight-color;

}

.index-p{ 

$width:100px !global;

width:$width;

}

.index-sart{

width: $width;

}

$content:"first content";

$content:" second content"!default;

$new-content:"first time"!default;

#mian{ 

content:$content;

new-content:$new-content;

}

// sass支持運算符

.index-sum{

margin-left:5px+8px/2px;

}

// 要是不作除法運算,用#{}包着變量或值便可

p{

$font-size: 12px;

$line-height:30px;

font:#{$font-size}/#{$line-height};

}

//顏色值的alpha能夠經過opacify函數和transparentize函數進行調整

.pcolor{

color:opacify($highlight-color,.4);

}

//字符串運算  +能夠用於字符串鏈接

// 插入值語句(  父級用&，其餘用#{} )

$name:foo;

$attr:border;

p.#{ $name }{

#{ $attr }-color:blue;

}

//@import容許其導入scss或sass文件。被導入的文件將合併編譯到同一個css文件中，

//被導入的文件所包含的變量或者混合指令均可以在導入的文件中使用。

//

//容許導入多個文件

//@import "","";

//

//@import也能夠在嵌套中使用，這樣導入的樣式只能在嵌套層中使用，可是不能夠在混合指令或

//控制指令中嵌套

//

//@media

//

//@media嵌套，將會編譯到文件的最外層，包含嵌套的父選擇器

.sidebar{

width:200px;

@media screen and (orientation:landscape){

width:220px;

}

}

// @extend   一個元素使用的樣式與另一個元素徹底相同，可是又添加了額外的樣式。

// 就能夠用這個聲明來繼承

.error{

border:1px #f00;

}

.seriousError{

@extend .error;

border-width: 4px;

}

//@extend 的幾大屬性

//

//會繼承父級屬性

// 特殊狀況，在@media中的使用，被繼承類必須在@media塊中

// 設置打印機用字體尺寸(@media print)   

@media print {

.error1{

border: 1px #f00;

background-color: #fdd;

}

.seriousError {

@extend .error1;

border-width: 3px;

}

}

//@at-root 在嵌套中使用，裏面的元素能夠不繼承父節點

.parent{

.one{ padding: 10px;}

@at-root{

.two{

margin:30px;

}

}

}

//在@media中使用也一樣如此，能夠不在媒體查詢的範圍

//某個類的某些屬性

@media print{

.page{

border-width: 2px;

@at-root(without: media){

border-radius: 4px;

}

}

}

//@debug和@warn  還有%佔位符感受並無什麼用

//

//控制指令

//@if 若是條件成立時，輸出{}的代碼

$type:monster;

p{

@if $type==ocean{

color:blue;

}@else if $type == matador{

color:red;

}@else if $type == monster{

color:green;

}

}

// @for

// 

@for $i from 1 through 3{

.item-#{$i}{ width:2em * $i; }

}

//@each  循環列表(一個變量的狀況)

@each $animal in puma,sea-slug,egret,salsmandr{

.#{ $animal }-icon{

background-image: url("/images/#{$animal}.png");

}

}

// @each  兩個變量的狀況

@each  $header,$size in (h1:1em,h2:1.5em,h3:2em){

#{$header}{

font-size: $size;

}

}

// @while   重複輸出格式直到表達式返回結果爲false

$i: 6;

@while $i > 0 {

.item-#{$i} { width: 2em * $i; }

$i: $i - 2;

}

//混合指令（和繼承有點類似呀）

//

//定義混合指令與引用混合指令

//

////混合樣式中也能夠包含其餘的混合樣式

@mixin text{

border:1px solid #dedede;

}

@mixin large-text{

    @include text;

font:{

size:20px;

}

color:#ff0000;

}

.page-title{

@include large-text;

padding:4px;

}

//混合指令能夠傳參數

//

@mixin sexy-border($color,$width:2in){

border:{

color:$color;

width:$width;

}

}

p{ @include sexy-border(blue); }

//混合指令能夠給參數設置默認值，當這個指令被引用時，若是沒有給參數

//則自動使用默認值

//

//

//混合指令不肯定參數,變量加點點點

@mixin box-shadow($shadows...) {

  -moz-box-shadow: $shadows;

  -webkit-box-shadow: $shadows;

  box-shadow: $shadows;

}

.shadows {

  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);

}

//還有另一種寫法

@mixin colors($text, $background, $border) {

  color: $text;

  background-color: $background;

  border-color: $border;

}

$values: #ff0000, #00ff00, #0000ff;

.primary {

  @include colors($values...);

}

//函數指令   能夠返回一個計算後的數值

$grid-width: 40px;

$gutter-width: 10px;

@function grid-width($n) {

  @return $n * $grid-width + ($n - 1) * $gutter-width;

}

#sidebar { width: grid-width(5); }