scss的基本用法

Yi_Zhi_Yu 發(fā)布于2019-08-30 15:44 / 1072人閱讀

摘要：一定義變量定義變量基本用法變量作為字符串拼接二簡(jiǎn)單的計(jì)算加減乘除三選擇器嵌套四繼承樣式五使用，強(qiáng)大之處在于可以傳遞參數(shù)不傳參傳參初始化默認(rèn)值六導(dǎo)入外部七高級(jí)用法，循環(huán)語(yǔ)句和自定義函數(shù)的使用自定義函數(shù)

一、定義變量

二、簡(jiǎn)單的計(jì)算加減乘除

三、選擇器嵌套

四、繼承樣式 @extend

五、@mixin @include 使用，強(qiáng)大之處在于可以傳遞參數(shù)

六、導(dǎo)入外部scss、css @import

七、高級(jí)用法，循環(huán)語(yǔ)句和自定義函數(shù)的使用

@for $i from 1 to 10 {
  // .myLi1 .myLi2 .myLi3 ...... .myLi10
  .myLi#{$i} {
    border: #{$i}px solid #468dcc;
  }
}

// 自定義函數(shù)
@function myScssFun($p) {
  @if $p > 10 {
      @return $p;
  } @else {
      @return $p * 2;
  }
}
div {
    font-size: myScssFun(10px);
}

GPU云服務(wù)器云服務(wù)器基本用法 JSTL基本用法 SCSS html5 scss

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

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

相關(guān)文章

SASS詳解

摘要：以前看到之類(lèi)的工具覺(jué)得應(yīng)該比較難，今天接觸了之后發(fā)現(xiàn)挺好用的，主要是方便了的編寫(xiě)。具體可以看慕課網(wǎng)教程編譯方法在命令行輸入編譯單個(gè)文件編譯整個(gè)文件夾到文件夾也就是這樣的語(yǔ)法下文中我都這樣寫(xiě)。這里貼一張慕課網(wǎng)拿到的表格。以前看到SASS之類(lèi)的工具覺(jué)得應(yīng)該比較難，今天接觸了之后發(fā)現(xiàn)挺好用的，主要是方便了CSS的編寫(xiě)。在編寫(xiě)比較大的項(xiàng)目的時(shí)候，由于內(nèi)容很多，因此樣式表也會(huì)比較繁雜，如果要修...

余學(xué)文 2019-08-29 11:29 評(píng)論0 收藏0
SCSS學(xué)習(xí)筆記（一）

摘要：的由來(lái)就是加強(qiáng)版的，要講那就一定要從講起英文全稱是一個(gè)最初由設(shè)計(jì)并由開(kāi)發(fā)的層疊樣式表語(yǔ)言。年發(fā)行，年版本穩(wěn)定，設(shè)計(jì)和開(kāi)發(fā)分開(kāi)進(jìn)行，讓這個(gè)語(yǔ)言的功能相當(dāng)完善。變量允許使用變量，所有變量以開(kāi)頭。 SCSS的由來(lái) SCSS就是加強(qiáng)版的CSS，要講SCSS那就一定要從SASS講起 SASS Sass（英文全稱：Syntactically Awesome Stylesheets）是一個(gè)最初由Ha...

simpleapples 2019-08-29 16:37 評(píng)論0 收藏0
SASS學(xué)習(xí)記錄

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

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

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

HollisChuang 2019-08-30 15:52 評(píng)論0 收藏0
SCSS 日常用法

摘要：生成相互嵌入這個(gè)是最常用的，通過(guò)定義一個(gè)類(lèi)或方法，在其它地方通過(guò)引用這個(gè)方法或類(lèi)。生成注意事項(xiàng)不能繼承這種連續(xù)組合的類(lèi)，應(yīng)該寫(xiě)為常用方法詳見(jiàn)不知道別人，反正我最常用的就是顏色方法了。 SCSS 日常用法本文是以自己的理解起的結(jié)構(gòu)，要看詳細(xì)的幫助文檔，參閱這里：https://sass-lang.com/documen... 你需要了解的 less 和 sass 是兩種 css 預(yù)編...

Lyux 2019-08-29 18:45 評(píng)論0 收藏0