SASS知識點

jhhfft 發布于2019-08-29 13:55 / 844人閱讀

SASS介紹

css預處理器。其實還有用的很多的less，stylus。
SASS支持所有css語法
基礎的文件命名方法以_開頭

準備工具

SASS編譯工具
?官方下載地址，下載對應版本

用法：

將項目中的css文件夾拖入Koala

創建sass文件后綴demo.sass (Koala會自動編譯成demo.css)

demo.html正常引入demo.css 文件

SASS基礎知識 變量

demo.scss

$bg-color : #00a1e9;
$bg-red : red;
$nav-height : 50px;

body{
    background: $bg-color;
}
.demo{
    height:$nav-height / 2;
}

編譯文件 demo.css

body {
  background: #00a1e9; 
}
.demo {
  height: 25px;
}

嵌套

demo.scss

a{
    &:hover{
        .demo{
            background: $bg-red; 
        }
    }
    
}

編譯文件 demo.css

a:hover .demo {
  background: red; 
}

繼承

demo.scss

.sub-title {
      color: #666;
      margin: 0;
      text-align: center;
      font-size: 32px;
      font-weight: bold;
}
p {
      @extend .sub-title;
      background: #fff;
}

編譯文件 demo.css

.sub-title, p {
  color: #666;
  margin: 0;
  text-align: center;
  font-size: 32px;
  font-weight: bold; 
}

p {
  background: #fff; 
}

類似函數

sass通過關鍵字 @mixin定義類似函數格式：@mixin 函數名(){ }
通過@include 引入函數

封裝函數可以寫在一個多帶帶的sass文件里，方便管理

//兼容ie opacity封裝
@mixin opacity($opacity){
    opacity: $opacity;
    filter: alpha(opacity=$opacity * 100);
}
//使用
.demo{
    @include opacity(1);
}


----------
//編譯結果
.demo {
  opacity: 1;
  filter: alpha(opacity=100); 
}

引入封裝函數

比如：項目中有基礎文件
_mixin.scss
_header.scss
_footer.scss

文件index.scss正好也需要引入這三個基礎文件

@import "mixin";
@import "header";
@import "footer";

引入基礎的scss，不需要下劃線和后綴名

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112802.html

sass的基本使用

摘要：本文所有的例子都是在中編譯，而可以自行編譯，具體可以查看該鏈接配置的概念定義是的一種預處理器，文件后綴名為，可以用中的來轉成樣式。最近在項目中利用到了css預處理器（sass），而之前沒接觸過的本博主出于好奇心，就在業余的時間里搜了一些資料來看看，看完后覺得sass挺不錯，就想簡單的介紹一下sass的基本使用方法（ps：本文只介紹sass的一些基本使用，而這些內容都是本博主覺得比較有...

alighters 2019-08-30 15:53 評論0 收藏0
關于sass、scss、less的概念性知識匯總

摘要：而使用預處理器，提供缺失的樣式層復用機制減少冗余代碼，提高樣式代碼的可維護性。所以我們在實際項目中衡量預編譯方案時，還是得想想，比起帶來的額外維護開銷，預處理器有沒有解決更大的麻煩。也是成熟的預處理器之一，而且有一個穩定，強大的團隊在維護。這篇文章主要解答以下幾個問題，供前端開發者的新手參考。 1、什么是Sass和Less？ 2、為什么要使用CSS預處理器？ 3、Sass和Less的...

HmyBmny 2019-08-29 16:24 評論0 收藏0
關于sass、scss、less的概念性知識匯總

摘要：而使用預處理器，提供缺失的樣式層復用機制減少冗余代碼，提高樣式代碼的可維護性。所以我們在實際項目中衡量預編譯方案時，還是得想想，比起帶來的額外維護開銷，預處理器有沒有解決更大的麻煩。也是成熟的預處理器之一，而且有一個穩定，強大的團隊在維護。這篇文章主要解答以下幾個問題，供前端開發者的新手參考。 1、什么是Sass和Less？ 2、為什么要使用CSS預處理器？ 3、Sass和Less的...

xuweijian 2019-08-02 11:15 評論0 收藏0
SASS學習記錄

摘要：前言很久沒有用文章記錄自己的學習歷程了，主要是因為實在寫的不行，相比大牛寫的博客，我這只能算是東拼西湊或者說是讀書筆記。以前我只使用外部，現在的更加好用，所以在學習過程中記了一些筆記。在后面加一個感嘆號，表示這是重要注釋。前言很久沒有用文章記錄自己的學習歷程了，主要是因為實在寫的不行，相比大牛寫的博客，我這只能算是東拼西湊或者說是讀書筆記。但是今天還是拾起筆來了，雖然沒什么干貨，但...

tylin 2019-08-20 14:25 評論0 收藏0
SASS學習記錄

摘要：前言很久沒有用文章記錄自己的學習歷程了，主要是因為實在寫的不行，相比大牛寫的博客，我這只能算是東拼西湊或者說是讀書筆記。以前我只使用外部，現在的更加好用，所以在學習過程中記了一些筆記。在后面加一個感嘆號，表示這是重要注釋。前言很久沒有用文章記錄自己的學習歷程了，主要是因為實在寫的不行，相比大牛寫的博客，我這只能算是東拼西湊或者說是讀書筆記。但是今天還是拾起筆來了，雖然沒什么干貨，但...

HollisChuang 2019-08-30 15:52 評論0 收藏0