SCSS的一些小筆記

rottengeek 發(fā)布于2019-08-26 14:05 / 1275人閱讀

摘要：嵌套選擇器注釋以為首會(huì)保留輸出到變量有作用域，其中和代表同一個(gè)變量插值支持參數(shù)聲明重復(fù)代碼使用不支持參數(shù)聲明重復(fù)代碼使用和區(qū)別除了是否支持參數(shù)外，是把重復(fù)的代碼抄到選擇器內(nèi)，而則是把選擇器抄到代碼頭上。聲明使用使屬性可復(fù)用

嵌套選擇器：&

.row {
  flex-wrap: wrap;
  border: 1px solid red;
  display: flex;
  &.align-left {
  }
}

注釋：以！為首會(huì)保留輸出到CSS

變量：$width:5em;(有作用域，其中$m-width和$_width代表同一個(gè)變量)

插值：#{}

@mixin：支持參數(shù)

//聲明
@minxin name{
//重復(fù)代碼
}
//使用
@include name{
}

%placeholder：不支持參數(shù)

//聲明
% name{
//重復(fù)代碼
}
//使用
@extwnd %name{
}

@mixin 和 %placeholder 區(qū)別：除了是否支持參數(shù)外，@mixin 是把重復(fù)的代碼抄到選擇器內(nèi)，而%placeholder 則是把選擇器抄到代碼頭上。

@Function

//聲明
@function x2($value){
    @return $value*2
}
//使用
width:x2(80px);//使屬性可復(fù)用

云服務(wù)器 GPU云服務(wù)器 ddos一些比較小的網(wǎng)站 java的一些代碼深度學(xué)習(xí)的一些應(yīng)用 php實(shí)用的一些代碼

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

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

相關(guān)文章

前端小項(xiàng)目之在線便利貼

摘要：實(shí)現(xiàn)的效果如下界面可能不是太好看，考慮到容器的高度會(huì)被拉長(zhǎng)，因此沒有用圖片做背景。實(shí)現(xiàn)的效果如下： showImg(https://segmentfault.com/img/remote/1460000011155402); 界面可能不是太好看?，考慮到容器的高度會(huì)被拉長(zhǎng)，因此沒有用圖片做背景。預(yù)覽便利貼涉及的知識(shí)點(diǎn) sass(css 預(yù)編譯器) webpack（自動(dòng)化構(gòu)...

microelec 2019-08-22 11:06 評(píng)論0 收藏0
前端之Sass/Scss實(shí)戰(zhàn)筆記

摘要：有兩種語法規(guī)則目前新的語法規(guī)則從開始被稱為時(shí)髦的它是語法的的拓展級(jí)，就是說每一個(gè)語法正確的文件也是合法的文件，文件使用作為拓展名。備注注意源文件和目標(biāo)文件之間是冒號(hào)，與編譯命令中為空格不同。 Introduction Sass 有兩種語法規(guī)則(syntaxes),目前新的語法規(guī)則（從 Sass 3開始）被稱為 SCSS( 時(shí)髦的css（Sassy CSS）),它是css3語法的的拓展級(jí)...

Sike 2019-08-28 18:17 評(píng)論0 收藏0
SCSS學(xué)習(xí)筆記（一）

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

simpleapples 2019-08-29 16:37 評(píng)論0 收藏0
學(xué)習(xí)筆記 - Sass的安裝與使用手冊(cè)

摘要：現(xiàn)在將學(xué)習(xí)筆記整理在這里，供大家參考。的安裝的編輯器安裝方法有很多，大致能分為兩種應(yīng)用程序和命令行界面。如果已經(jīng)安裝過，也可以使用指令如果提示權(quán)限不足，在命令行前加上即可。參考網(wǎng)頁(yè)編輯器的使用的使用很簡(jiǎn)單，記住兩條指令即可。最近因?yàn)楣ぷ餍枰?，自學(xué)了Sass。現(xiàn)在將學(xué)習(xí)筆記整理在這里，供大家參考。 1. Sass的安裝 Sass的編輯器安裝方法有很多，大致能分為兩種：應(yīng)用程序（appl...

Jeff 2019-08-29 16:57 評(píng)論0 收藏0
我的webpack學(xué)習(xí)筆記（一）

摘要：前言在上一篇文章中我介紹了學(xué)習(xí)前的準(zhǔn)備工作，下面開始的學(xué)習(xí)。目標(biāo)一般我們接觸到的關(guān)于的文章，都是以解讀官方文檔為主，而且是針對(duì)單頁(yè)面項(xiàng)目的應(yīng)用。我先在假設(shè)要做一個(gè)多頁(yè)面應(yīng)用，該如何去通過打包。前言在上一篇文章中我介紹了學(xué)習(xí)webpack前的準(zhǔn)備工作，下面開始webpack的學(xué)習(xí)。 *創(chuàng)建webpack-demo文件夾 $ mkdir webpack-demo $ cd webpac...

wh469012917 2019-08-21 11:48 評(píng)論0 收藏0