@charset "utf-8";
//中文註釋
//1、變量(變量分爲局部變量和全局變量)
//位置也需要注意，不能放在使用這個變量之後
//
$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); }