scss學習筆記

@charset "UTF-8";

$highlight-color:#F90;  //$來聲明變量的
$basic-color:1px solid black;


/*引用方式*/
.btn{
    $width:100px; // 這個只能在{}裏用，對外面的不影響
    width: $width;
    color:$highlight-color;
    border:1px solid $highlight-color;
}

/*scss 的多層嵌套*/
div {
    p {
        a{
            color:$highlight-color;
        }
    }
}
/*關於僞類的嵌套*/
div {
    p {
        &:after{
            border:$basic-color;
        }
    }
}

//子元素選擇器 >
//相鄰兄弟選擇器 +
//普通兄弟選擇器 ~  (div ~ p    div選擇器不選擇)


div {
    ~ p{
        color:$highlight-color;
    }
    > p {
        border:$basic-color;
    }
    nav + & {
        border:1px solid $highlight-color;
    }
}

//嵌套屬性  border-style  border-width  border-color 能夠這樣寫:
div {
    border {
        style:solid;
        width:10px;
        color:$highlight-color;
    }
}

//拆分多個scss文件，使用 @import 引入，不一樣文件最後會打包到一個css文件裏
//css 也有@import 可是當用的時候，纔會下載
//mixins.scss colors.scss grid.scss  這三個scss文件在引入的時候，能夠忽略後綴
@import 'mixins';
@import 'colors';
@import 'grid';


//使用scss部分文件（局部文件）
//scss局部文件的文件名如下劃線開頭，sass就不會在編譯時單獨編譯這個文件輸出css，
//而只把這個文件用做導入，仍是能夠省略後綴，以下：（如這個文件：themes/_night-sky.scss）
@import "themes/night-sky";


//默認變量值
$link-color:red;
$link-color:green;
a {
    color:$link-color;  //color:green;
}
//能夠設置默認值
$link-color:orange !default;  //權重很低，至關於!important 的對立面

a {
    $link-color:#d9d9d9;
    color:$link-color;  //color:#d9d9d9;
}

//嵌套導入


//下面是_aside-box.scss局部文件
div {
    background-color: #fff;
    width:100px;
}

//在anther-box.scss 引入這個局部文件
div {
    @import 'aside-box';
    height:100px;
}

//轉會爲==> div{background-color: #fff;width:100px;height:100px;}
//scss兼容css
//在scss裏也能夠導入css文件（以.css文件結尾的）按需加載css文件

/* scss裏的註釋有兩種方式 */


//混合器
//  -->用來處理大段重複的樣式（少的話，變量就能夠替代）
//  使用@mixin 標識符定義 使用@include來使用這個混合器
@mixin rounded-corners {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

//引入混合器
div {
    width:100px;
    height:100px;
    border: 1px solid #000;
    @include rounded-corners;
}

//混合器中css規則
@mixin no-bullets {
    list-style: none;
    li {
        list-style-image: none;
        margin-left:0;
    }
}

ul.plain{
    color:#eee;
    @include no-bullets;
}

//編譯的結果爲：

ul.plain {
    color:#eee;
    list-style: none;
}

ul.plain li {
    list-style-image: none;
    margin-left:0;
}

// 給混合器傳參
@mixin link-colors($normal,$hover,$visited){
    color:$normal;
    &:hover{
        color:$hover
    }
    &:visited{
        color:$visited;
    }
}

a {
    text-decoration:none;
    @include link-colors(red,green,orange)
}

//編譯結果

a {
    text-decoration: none;
    color:red;
}
a:hover {
    color:green;
}
a:visited {
    color:orange;
}


//默認參數值      參數默認值使用$name: default-value的聲明形式，
//默認值能夠是任何有效的css屬性值，甚至是其餘參數的引用
@mixin link-colors{
    $normal,
    $hover:$normal,
    $visited:$normal
}

//解析結果 （直接調用@include）

{
    color:$normal;
    a:hover {
        color:$normal;
    }
    a:visited {
        color:$normal;
    }
}

//若是@include(red),編譯結果
{
    color:red;
    a:hover {
        color:red;
    }
    a:visited {
        color:red;
    }
}


/*使用選擇器繼承來精簡css 使用@extend 語法實現*/
.error {
    border-radius:10px;
}
.box {
    @extend .error;
    border-width:10px;
}

//編譯結果
.box {
    border-radius:10px;
    border-width:10px;
}

//.box不只會繼承.error自身的全部樣式，任何跟.error有關的組合選擇器也會被.box以組合選擇器的形式繼承

//.box 從 .error繼承樣式
.error a { // 應用到.box a 
    color: red;
    font-weight:100;
}

h1.error { //應用到h1.box
    font-size:1.2rem;
}

//繼承的高級用法
//繼承一個html元素的樣式（一個灰掉的a連接標籤）
.disabled{
    color:gray;
    @extend a;  // 繼承a標籤的全部默認樣式
}

/*  數據類型
    數字，1, 2, 13, 10px
    字符串，有引號字符串與無引號字符串，"foo", 'bar', baz
    顏色，blue, #04a3f9, rgba(255,0,0,0.5)
    布爾型，true, false
    空值，null
    數組 (list)，用空格或逗號做分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
    maps, 至關於 JavaScript 的 object，(key1: value1, key2: value2)
*/
 

 /*
    SassScript 對Unicode 字符集，或 !important 聲明；    視爲無引號字符串
    字符串：{
        有引號字符串，
        無引號字符串
    }
    使用#{}  scss會把有引號的字符串轉化爲沒有引號的字符串，這樣便於mixin引用選擇器名
 */ 

 @mixin firefox-message($selector) {
     body.firefox #{$selector}:before {
         content: 'hello world'
     }
 }

@include firefox-message(".header");
 // 編譯的結果爲
body.firefox .header:before {
     content: 'hello world'
}

// 運算  + - * / 

$width:100px;

.box {
    width:10px*10 + 2px/2;
}

//編譯結果
.box {
    width: 101px;
}
//若是須要使用變量，同時又要確保 / 不作除法運算而是完整地編譯到 CSS 文件中，只須要用 #{} 插值語句將變量包裹。
p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

// 編譯爲：
p {
  font: 12px/30px;
}

/* 顏色值運算 */ 
p {
  color: #010203 + #040506;
}
// 計算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，而後編譯爲（加減乘除相同）
p {
  color: #050709;
}

/* 字符串運算 */ 

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

// 編譯爲

p:before {
  content: "Foo Bar";  // 前面是有引號的字符串，後面是沒有引號字符串轉化的狀況
  font-family: sans-serif; // 前面沒有引號的字符串，後面是有引號的字符串
}


/*@if @else if*/

@mixin getColor($color) {
    @if $color == blue {
        color:$color;
    } @else if $color == green {
        color:$color;
    } @else if $color == red {
        color:$color;
    }
}

// @each 
@each $animal in green,orange,blue {
    .#{$animal}-icon {
        background-image: url('image/${$animal}.png');
    }
}

// 編譯結果：
.green-icon {
    background-image: url('image/green.png');
}
.orange-icon {
    background-image: url('image/orange.png');
}
.blue-icon {
    background-image: url('image/blue.png');
}

// @for
@for $i from 1 through 3 {
    .item-#{$i} {
        width:2em * $i;
    }
}
// 編譯結果
.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}