2. 程式人生 > >SASS/SCSS 使用指南

SASS/SCSS 使用指南

阿新 • • 發佈：2019-02-04

關於sass 3.3.0更新說明——3.3.0

sublime相關外掛為：scss語法高亮，sass語法高亮，編譯，儲存即編譯，格式化

檔案字尾名

sass有兩種字尾名檔案：一種字尾名為sass，不使用大括號和分號；另一種就是我們這裡使用的scss檔案，這種和我們平時寫的css檔案格式差不多，使用大括號和分號。而本教程中所說的所有sass檔案都指字尾名為scss的檔案。在此也建議使用字尾名為scss的檔案，以避免sass字尾名的嚴格格式要求報錯。

//檔案字尾名為sass的語法
body
  background: #eee
  font-size:12px
p
  background: #0982c1
 


//檔案字尾名為scss的語法  
body {
  background: #eee;
  font-size:12px;
}
p{
  background: #0982c1;
}

匯入

sass的匯入(@import)規則和CSS的有所不同，編譯時會將@import的scss檔案合併進來只生成一個CSS檔案。但是如果你在sass檔案中匯入css檔案如@import 'reset.css'，那效果跟普通CSS匯入樣式檔案一樣，匯入的css檔案不會合併到編譯後的檔案中，而是以@import方式存在。

所有的sass匯入檔案都可以忽略字尾名.scss。一般來說基礎的檔案命名方法以_開頭，如_mixin.scss

。這種檔案在匯入的時候可以不寫下劃線，可寫成@import "mixin"。

被匯入sass檔案a.scss：

//a.scss
//-------------------------------
body {
  background: #eee;
}

需要匯入樣式的sass檔案b.scss：

@import "reset.css";
@import "a";
p{
  background: #0982c1;
}

轉譯出來的b.css樣式：

@import "reset.css";
body {
  background: #eee;
}
p{
  background: #0982c1
 
;
}

根據上面的程式碼可以看出，b.scss編譯後，reset.css繼續保持import的方式，而a.scss則被整合進來了。

註釋

sass有兩種註釋方式，一種是標準的css註釋方式/* */，另一種則是//雙斜杆形式的單行註釋，不過這種單行註釋不會被轉譯出來。

標準的css註釋

/*
*我是css的標準註釋
*設定body內距
*/
body{
  padding:5px;
}

雙斜杆單行註釋

單行註釋跟JavaScript語言中的註釋一樣，使用又斜槓（//），但單行註釋不會輸入到CSS中。

//我是雙斜槓表示的單行註釋
//設定body內距
body{
  padding:5px; //5px
}

變數

sass的變數必須是$開頭，後面緊跟變數名，而變數值和變數名之間就需要使用冒號(:)分隔開（就像CSS屬性設定一樣），如果值後面加上!default則表示預設值。

普通變數

定義之後可以在全域性範圍內使用。

//sass style
//-------------------------------
$fontSize: 12px;
body{
    font-size:$fontSize;
}

//css style
//-------------------------------
body{
    font-size:12px;
}

預設變數

sass的預設變數僅需要在值後面加上!default即可。

//sass style
//-------------------------------
$baseLineHeight:        1.5 !default;
body{
    line-height: $baseLineHeight; 
}

//css style
//-------------------------------
body{
    line-height:1.5;
}

sass的預設變數一般是用來設定預設值，然後根據需求來覆蓋的，覆蓋的方式也很簡單，只需要在預設變數之前重新宣告下變數即可

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

//css style
//-------------------------------
body{
    line-height:2;
}

可以看出現在編譯後的line-height為2，而不是我們預設的1.5。預設變數的價值在進行元件化開發的時候會非常有用。

特殊變數

一般我們定義的變數都為屬性值，可直接使用，但是如果變數作為屬性或在某些特殊情況下等則必須要以#{$variables}形式使用。

//sass style
//-------------------------------
$borderDirection:       top !default; 
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;

//應用於class和屬性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//應用於複雜的屬性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}

//css style
//-------------------------------
.border-top{
  border-top:1px solid #ccc;
}
body {
  font: 12px/1.5;
}

多值變數

多值變數分為list型別和map型別，簡單來說list型別有點像js中的陣列，而map型別有點像js中的物件。

list

list資料可通過空格，逗號或小括號分隔多個值，可用nth($var,$index)取值。關於list資料操作還有很多其他函式如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等，具體可參考sass Functions（搜尋List Functions即可）

定義

//一維資料
$px: 5px 10px 20px 30px;

//二維資料，相當於js中的二維陣列
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);

使用

//sass style
//-------------------------------
$linkColor:         #08c #333 !default;//第一個值為預設值，第二個滑鼠滑過值
a{
  color:nth($linkColor,1);

  &:hover{
    color:nth($linkColor,2);
  }
}

//css style
//-------------------------------
a{
  color:#08c;
}
a:hover{
  color:#333;
}

map

map資料以key和value成對出現，其中value又可以是list。格式為：$map: (key1: value1, key2: value2, key3: value3);。可通過map-get($map,$key)取值。關於map資料還有很多其他函式如map-merge($map1,$map2)，map-keys($map)，map-values($map)等，具體可參考sass Functions（搜尋Map Functions即可）

定義

$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

使用

//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}

//css style
//-------------------------------
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}

全域性變數

在變數值後面加上!global即為全域性變數。這個目前還用不上，不過將會在sass 3.4後的版本中正式應用。目前的sass變數範圍飽受詬病，所以才有了這個全域性變數。

目前變數機制

在選擇器中宣告的變數會覆蓋外面全域性宣告的變數。(這也就人們常說的sass沒有區域性變數)

//sass style
//-------------------------------
$fontSize:      12px;
body{
    $fontSize: 14px;        
    font-size:$fontSize;
}
p{
    font-size:$fontSize;
}

//css style
//-------------------------------
body{
    font-size:14px;
}
p{
    font-size:14px;
}

啟用global之後的機制

請注意，這個目前還無法使用，所以樣式不是真實解析出來的。

//sass style
//-------------------------------
$fontSize:      12px;
$color:         #333;
body{
    $fontSize: 14px;        
    $color：   #fff !global;
    font-size:$fontSize;
    color:$color;
}
p{
    font-size:$fontSize;
    color:$color;
}

//css style
//-------------------------------
body{
    font-size:14px;
    color:#fff;
}
p{
    font-size:12px;
    color:#fff;
}

這裡設定了兩個變數，然後在body裡面重新設定了下，有點不同的是對於$color變數，我們設定了!global。通過編譯後的css可以看到font-size取值不同，而color取值相同。與上面的機制對比就會發現預設在選擇器裡面的變數為區域性變數，而只有設定了!global之後才會成為全域性變數。

巢狀(Nesting)

sass的巢狀包括兩種：一種是選擇器的巢狀；另一種是屬性的巢狀。我們一般說起或用到的都是選擇器的巢狀。

選擇器巢狀

所謂選擇器巢狀指的是在一個選擇器中巢狀另一個選擇器來實現繼承，從而增強了sass檔案的結構性和可讀性。

在選擇器巢狀中，可以使用&表示父元素選擇器

//sass style
//-------------------------------
#top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
  li{
    float:left;
  }
  a{
    display: block;
    padding: 0 10px;
    color: #fff;

    &:hover{
      color:#ddd;
    }
  }
}

//css style
//-------------------------------
#top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
}  
#top_nav li{
  float:left;
}
#top_nav a{
  display: block;
  padding: 0 10px;
  color: #fff;
}
#top_nav a:hover{
  color:#ddd;
}

屬性巢狀

所謂屬性巢狀指的是有些屬性擁有同一個開始單詞，如border-width，border-color都是以border開頭。拿個官網的例項看下：

//sass style
//-------------------------------
.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

//css style
//-------------------------------
.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc; 
}

當然這只是個屬性巢狀的例子，如果實際這樣使用，那估計得瘋掉。

@at-root

sass3.3.0中新增的功能，用來跳出選擇器巢狀的。預設所有的巢狀，繼承所有上級選擇器，但有了這個就可以跳出所有上級選擇器。

普通跳出巢狀

//sass style
//-------------------------------
//沒有跳出
.parent-1 {
  color:#f00;
  .child {
    width:100px;
  }
}

//單個選擇器跳出
.parent-2 {
  color:#f00;
  @at-root .child {
    width:200px;
  }
}

//多個選擇器跳出
.parent-3 {
  background:#f00;
  @at-root {
    .child1 {
      width:300px;
    }
    .child2 {
      width:400px;
    }
  }
}

//css style
//-------------------------------
.parent-1 {
  color: #f00;
}
.parent-1 .child {
  width: 100px;
}

.parent-2 {
  color: #f00;
}
.child {
  width: 200px;
}

.parent-3 {
  background: #f00;
}
.child1 {
  width: 300px;
}
.child2 {
  width: 400px;
}

@at-root (without: ...)和@at-root (with: ...)

預設@at-root只會跳出選擇器巢狀，而不能跳出@media或@support，如果要跳出這兩種，則需使用@at-root (without: media)，@at-root (without: support)。這個語法的關鍵詞有四個：all（表示所有），rule（表示常規css），media（表示media），support（表示support，因為@support目前還無法廣泛使用，所以在此不表）。我們預設的@at-root其實就是@at-root (without:rule)。

//sass style
//-------------------------------
//跳出父級元素巢狀
@media print {
    .parent1{
      color:#f00;
      @at-root .child1 {
        width:200px;
      }
    }
}

//跳出media巢狀，父級有效
@media print {
  .parent2{
    color:#f00;

    @at-root (without: media) {
      .child2 {
        width:200px;
      } 
    }
  }
}

//跳出media和父級
@media print {
  .parent3{
    color:#f00;

    @at-root (without: all) {
      .child3 {
        width:200px;
      } 
    }
  }
}

//sass style
//-------------------------------
@media print {
  .parent1 {
    color: #f00;
  }
  .child1 {
    width: 200px;
  }
}

@media print {
  .parent2 {
    color: #f00;
  }
}
.parent2 .child2 {
  width: 200px;
}

@media print {
  .parent3 {
    color: #f00;
  }
}
.child3 {
  width: 200px;
}

@at-root與&配合使用

//sass style
//-------------------------------
.child{
    @at-root .parent &{
        color:#f00;
    }
}

//css style
//-------------------------------
.parent .child {
  color: #f00;
}

應用於@keyframe

//sass style
//-------------------------------
.demo {
    ...
    animation: motion 3s infinite;

    @at-root {
        @keyframes motion {
          ...
        }
    }
}

//css style
//-------------------------------   
.demo {
    ...   
    animation: motion 3s infinite;
}
@keyframes motion {
    ...
}

混合(mixin)

sass中使用@mixin宣告混合，可以傳遞引數，引數名以$符號開始，多個引數以逗號分開，也可以給引數設定預設值。宣告的@mixin通過@include來呼叫。

無引數mixin

//sass style
//-------------------------------
@mixin center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}

//css style
//-------------------------------
.demo{
    margin-left:auto;
    margin-right:auto;
}

有引數mixin

//sass style
//-------------------------------   
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}

//css style
//-------------------------------
.opacity{
  @include opacity; //引數使用預設值
}
.opacity-80{
  @include opacity(80); //傳遞引數
}

多個引數mixin

呼叫時可直接傳入值，如@include傳入引數的個數小於@mixin定義引數的個數，則按照順序表示，後面不足的使用預設值，如不足的沒有預設值則報錯。除此之外還可以選擇性的傳入引數，使用引數名與值同時傳入。

//sass style
//-------------------------------   
@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
    border-bottom:$border;
    padding-top:$padding;
    padding-bottom:$padding;  
}
.imgtext-h li{
    @include horizontal-line(1px solid #ccc);
}
.imgtext-h--product li{
    @include horizontal-line($padding:15px);
}

//css style
//-------------------------------
.imgtext-h li {
    border-bottom: 1px solid #cccccc;
    padding-top: 10px;
    padding-bottom: 10px;
}
.imgtext-h--product li {
    border-bottom: 1px dashed #cccccc;
    padding-top: 15px;
    padding-bottom: 15px;
}

多組值引數mixin

如果一個引數可以有多組值，如box-shadow、transition等，那麼引數則需要在變數後加三個點表示，如$variables...。

//sass style
//-------------------------------   
//box-shadow可以有多組值，所以在變數引數後面新增...
@mixin box-shadow($shadow...) {
  -webkit-box-shadow:$shadow;
  box-shadow:$shadow;
}
.box{
  border:1px solid #ccc;
  @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}

//css style
//-------------------------------
.box{
  border:1px solid #ccc;
  -webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
  box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
}

@content

@content在sass3.2.0中引入，可以用來解決css3的@media等帶來的問題。它可以使@mixin接受一整塊樣式，接受的樣式從@content開始。

 //sass style
//-------------------------------                     
@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}

@include max-screen(480px) {
  body { color: red }
}

//css style
//-------------------------------
@media only screen and (max-width: 480px) {
  body { color: red }
}

PS：@mixin通過@include呼叫後解析出來的樣式是以拷貝形式存在的，而下面的繼承則是以聯合宣告的方式存在的，所以從3.2.0版本以後，建議傳遞引數的用@mixin，而非傳遞引數類的使用下面的繼承%。

繼承

sass中，選擇器繼承可以讓選擇器繼承另一個選擇器的所有樣式，並聯合聲明。使用選擇器的繼承，要使用關鍵詞@extend，後面緊跟需要繼承的選擇器。

//sass style
//-------------------------------
h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

//css style
//-------------------------------
h1,.speaker{
  border: 4px solid #ff9aa9;
}
.speaker{
  border-width: 2px;
}

佔位選擇器%

從sass 3.2.0以後就可以定義佔位選擇器%。這種選擇器的優勢在於：如果不呼叫則不會有任何多餘的css檔案，避免了以前在一些基礎的檔案中預定義了很多基礎的樣式，然後實際應用中不管是否使用了@extend去繼承相應的樣式，都會解析出來所有的樣式。佔位選擇器以%標識定義，通過@extend呼叫。

//sass style
//-------------------------------
%ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
%clearfix{
  @if $lte7 {
    *zoom: 1;
  }
  &:before,
  &:after {
    content: "";
    display: table;
    font: 0/0 a;
  }
  &:after {
    clear: both;
  }
}
#header{
  h1{
    @extend %ir;
    width:300px;
  }
}
.ir{
  @extend %ir;
}

//css style
//-------------------------------
#header h1,
.ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
#header h1{
  width:300px;
}

如上程式碼，定義了兩個佔位選擇器%ir和%clearfix，其中%clearfix這個沒有呼叫，所以解析出來的css樣式也就沒有clearfix部分。佔位選擇器的出現，使css檔案更加簡練可控，沒有多餘。所以可以用其定義一些基礎的樣式檔案，然後根據需要呼叫產生相應的css。

ps：在@media中暫時不能@extend @media外的程式碼片段，以後將會可以。

函式

sass定義了很多函式可供使用，當然你也可以自己定義函式，以@fuction開始。sass的官方函式連結為：sass fuction，實際專案中我們使用最多的應該是顏色函式，而顏色函式中又以lighten減淡和darken加深為最，其呼叫方法為lighten($color,$amount)和darken($color,$amount)，它們的第一個引數都是顏色值，第二個引數都是百分比。

//sass style
//-------------------------------                     
$baseFontSize:      10px !default;
$gray:              #ccc !defualt;        

// pixels to rems 
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}

body{
  font-size:$baseFontSize;
  color:lighten($gray,10%);
}
.test{
  font-size:pxToRem(16px);
  color:darken($gray,10%);
}

//css style
//-------------------------------
body{
  font-size:10px;
  color:#E6E6E6;
}
.test{
  font-size:1.6rem;
  color:#B3B3B3;
}

關於@mixin，%，@function更多說明可參閱：

運算

sass具有運算的特性，可以對數值型的Value(如：數字、顏色、變數等)進行加減乘除四則運算。請注意運算子前後請留一個空格，不然會出錯。

$baseFontSize:          14px !default;
$baseLineHeight:        1.5 !default;
$baseGap:               $baseFontSize * $baseLineHeight !default;
$halfBaseGap:           $baseGap / 2  !default;
$samllFontSize:         $baseFontSize - 2px  !default;

//grid 
$_columns:                     12 !default;      // Total number of columns
$_column-width:                60px !default;   // Width of a single column
$_gutter:                      20px !default;     // Width of the gutter
$_gridsystem-width:            $_columns * ($_column-width + $_gutter); //grid system width

條件判斷及迴圈

@if判斷

@if可一個條件單獨使用，也可以和@else結合多條件使用

//sass style
//-------------------------------
$lte7: true;
$type: monster;
.ib{
    display:inline-block;
    @if $lte7 {
        *display:inline;
        *zoom:1;
    }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

//css style
//-------------------------------
.ib{
    display:inline-block;
    *display:inline;
    *zoom:1;
}
p {
  color: green; 
}

三目判斷

語法為：if($condition, $if_true, $if_false) 。三個引數分別表示：條件，條件為真的值，條件為假的值。

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

for迴圈

for迴圈有兩種形式，分別為：@for $var from <start> through <end>和@for $var from <start> to <end>。$i表示變數，start表示起始值，end表示結束值，這兩個的區別是關鍵字through表示包括end這個數，而to則不包括end這個數。

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

//css style
//-------------------------------
.item-1 {
  width: 2em; 
}
.item-2 {
  width: 4em; 
}
.item-3 {
  width: 6em; 
}

@each迴圈

語法為：@each $var in <list or map>。其中$var表示變數，而list和map表示list型別資料和map型別資料。sass 3.3.0新加入了多欄位迴圈和map資料迴圈。

單個欄位list資料迴圈

//sass style
//-------------------------------
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

//css style
//-------------------------------
.puma-icon {
  background-image: url('/images/puma.png'); 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); 
}
.egret-icon {
  background-image: url('/images/egret.png'); 
}
.salamander-icon {
  background-image: url('/images/salamander.png'); 
}

多個欄位list資料迴圈

//sass style
//-------------------------------
$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

//css style
//-------------------------------
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; 
}
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; 
}

多個欄位map資料迴圈

//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}

//css style
//-------------------------------
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}

轉載地址：

compass文件：

相關推薦

SASS/SCSS 使用指南

關於sass 3.3.0更新說明——3.3.0 sublime相關外掛為：scss語法高亮，sass語法高亮，編譯，儲存即編譯，格式化 檔案字尾名 sass有兩種字尾名檔案：一種字尾名為sass，不使用大括號和分號；另一種就是我們這裡使用的scss檔案，這種和我們平

Less、Sass/Scss

特性 創建 有著 font 工具 嵌套 watch 不同 nested CSS 預處理器是一種專門的編程語言，進行Web 頁面樣式設計，然後再編譯成正常的CSS 文件，以供項目使用。CSS 預處理器為CSS 增加一些編程的特性，無需考慮瀏覽器的兼容問題。 在CSS 中使用變

vue2.0以上版本安裝sass(scss)

我只 運算 AR 默認 sets In ttf babel 一段 一、首先說明sass和scss的區別。 1、異同：1）簡言之可以理解scss是sass的一個升級版本，完全兼容sass之前的功能，又有了些新增能力。語法形式上有些許不同，最主要的就是sass是靠縮進表示嵌套關

sass scss with sublime

ase osx window windows CM filter CA setting text 1.打開sublime，安裝包 Sass, Sass Build, SublimeOnSaveBuild 2.若未安裝sass，打開iterm，gem(ruby工具)安

sass/scss 和 less的區別

沒有 嵌套 shee footer less 前端開發 繼承 靈活 樣式 一. Sass/Scss、Less是什麽? Sass (Syntactically Awesome Stylesheets)是一種動態樣式語言，Sass語法屬於縮排語法，比css比多出好些功能(如變量

SASS用法指南

inpu .html 安裝 sta func 處理器 radi 直接 div http://www.ruanyifeng.com/blog/2012/06/sass.html 學過CSS的人都知道，它不是一種編程語言。 你可以用它開發網頁樣式，但是沒法用它編程。也就是說，C

sass(scss）的安裝與使用

CSS預編譯器有 SASS LESS Stylus等等，SCSS是SASS3引入的新語法。那為什麼要選擇SCSS呢？那我只能說我喜歡啊！不管SASS也好，LESS也罷，還是Stylus都只是一種工具，各有各的優缺點，選擇自己喜歡的用著舒服的就是了。沒必要糾結這麼多。 準備工作（注意：這是windows平臺下的

Sass/Scss基礎——rem與px的自動轉換

Sass/Scss中rem的使用 在CSS中，實現px和rem轉換非常簡單，但每次使用都需進行計算。雖然在html中設定font-size:62.5%即16px*62.5%=10px;會給大家帶來便利，但終究有些煩人，也不是長遠之計。另外，Google瀏

CSS 和 Sass (SCSS) 規範

CSS and Sass (SCSS) style rules ID and class naming ID和class(類)名總是使用可以反應元素目的和用途的名稱，或其他通用名稱。代替表象和晦澀難懂的名稱。 應該首選具體和反映元素目的的名稱

在vue專案中使用Sass/Scss(視窗環境)

1. 在使用Sass前,我們需要先安裝Ruby。以上安裝方法可以為我們快速設定好必要的設定，我們只需下載安裝包，隨後一切預設安裝即可。 2. 安裝程式也將安裝一個Ruby命令列powershell應用程式，它可以讓我們使用Ruby庫。 —————————

sass/scss語法@mixin

----------------------------題外話--------------------------------- css新增HSL顏色模式，h色調（360度圓盤），s飽和度（百分比），l亮度（百分比） eg.   p{ color:hsl(270,10

CSS框架-SASS 用法指南

一、什麼是SASS SASS是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單和可維護。 本文總結了SASS的主要用法。我的目標是，有了這篇文章，日常的一般使用就不需要去看官方文件了。 二、安裝和使用 2.1 安裝 SASS是R

Sass(SCSS)中文手冊——入門

因此 ext 本質 syn 大型 包括 scrip 顏色 編輯 簡書原文 https://www.jianshu.com/p/e82c27aa05c7 前言 該中文手冊是我在Sass中文文檔的基礎上編輯的，或者也可以理解為就是Sass中文文檔的翻版。之所以有這篇文章的原因還

css預編譯語言 sass scss（變量$var, css嵌套規則，@import規則，@extend，@mixin）

lar pre 文件 nesting var content sea 一行 如果 什麽是sass Sass 是對 CSS 的擴展，讓 CSS 語言更強大、優雅。 它允許你使用變量、嵌套規則、 mixins、導入等眾多功能， 並且完全兼容 CSS 語法。 Sass 有助於保

Vue-cli 3.0 使用Sass Scss Less預處理器

自動化 導入 ejs ces 如果 所有 http css ofo 項目中使用預處理器，可以有效減少css代碼量，使用Sass||Scss||Less; 預處理器 你可以在創建項目的時候選擇預處理器 (Sass/Less/Stylus)。如果當時沒有選好， 內置的 w

angular使用sass的scss語法

一個 .com es2017 one save 技術 12px sas json 一、現象： 為了簡寫樣式 二、解決： 1、安裝sass ,利用npm 安裝(npm工具如果沒有，請先自行安裝好) （1）、npm install node-sass --save

sass 出現error text.scss (Line 3: Invalid GBK character "xE9")錯誤

sass中文編碼錯誤造成這個問題的原因是，scss文件裏出現了中文字符，包括註釋也不行解決辦法是打開ruby的安裝文件，找到engine.rb文件，具體路徑如下：Ruby23-x64\lib\ruby\gems\2.3.0\gems\sass-3.5.3\lib\sass然後再所有的require後加入Enc

Sublime Text 3 LESS、SASS、SCSS高亮插件、提示插件

兼容 post 安裝目錄 今天 css語法 開始 pack 打開 預處理 LESS https://github.com/danro/LESS-sublime 功能：LESS高亮插件 下載 簡介：用LESS的同學都知道，sublime沒有支持l

Less/Sass編譯工具，koala使用指南

default 使用 方便 sse aux site 答復 可能 正在 如果你正在使用sass、less或coffee，而沒有註意到koala， 那說明你可能已經好久沒有更新你的知識庫了。koala這個由國人編寫的，用於編譯sass、less、coffee利器，在

小白Sass教程---通過例項學Sass--第五講--scss檔案匯入及Sass樣式優先順序測試

一、sass提供匯入機制，可以將頁面的共用較為通用的scss提取出來，這樣方便維護，其他頁面按需匯入相關的scss檔案，避免了所有的樣式都在一個樣式檔案中，一個樣式檔案較為繁重難以維護。   @import "../sass/lesson4"; 這樣就匯入了lesson4這