SASS知識(shí)點(diǎn)

jhhfft 發(fā)布于2019-08-29 13:55 / 926人閱讀

SASS介紹

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

準(zhǔn)備工具

SASS編譯工具
?官方下載地址，下載對(duì)應(yīng)版本

用法：

將項(xiàng)目中的css文件夾拖入Koala

創(chuàng)建sass文件后綴demo.sass (Koala會(huì)自動(dòng)編譯成demo.css)

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

SASS基礎(chǔ)知識(shí) 變量

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; 
}

類似函數(shù)

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

封裝函數(shù)可以寫在一個(gè)多帶帶的sass文件里，方便管理

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


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

引入封裝函數(shù)

比如：項(xiàng)目中有基礎(chǔ)文件
_mixin.scss
_header.scss
_footer.scss

文件index.scss正好也需要引入這三個(gè)基礎(chǔ)文件

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/112802.html

相關(guān)文章

sass的基本使用

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

alighters 2019-08-30 15:53 評(píng)論0 收藏0
關(guān)于sass、scss、less的概念性知識(shí)匯總

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

HmyBmny 2019-08-29 16:24 評(píng)論0 收藏0
關(guān)于sass、scss、less的概念性知識(shí)匯總

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

xuweijian 2019-08-02 11:15 評(píng)論0 收藏0
SASS學(xué)習(xí)記錄

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

tylin 2019-08-20 14:25 評(píng)論0 收藏0
SASS學(xué)習(xí)記錄

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

HollisChuang 2019-08-30 15:52 評(píng)論0 收藏0