您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“縮減SCSS 50%樣式代碼的方法有哪些”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“縮減SCSS 50%樣式代碼的方法有哪些”吧!
Sass
是CSS3
語(yǔ)言的擴(kuò)展,它能幫你更省事地寫出更好的樣式表,使你擺脫重復(fù)勞動(dòng),使工作更有創(chuàng)造性。因?yàn)槟隳芨斓負(fù)肀ё兓?,你也將敢于在設(shè)計(jì)上創(chuàng)新。你寫出的樣式表能夠自如地應(yīng)對(duì)修改顏色或修改HTML
標(biāo)簽,并編譯出標(biāo)準(zhǔn)的CSS
代碼用于各種生產(chǎn)環(huán)境。Sass
語(yǔ)法比較簡(jiǎn)單,難點(diǎn)在于如何將Sass運(yùn)用到實(shí)際項(xiàng)目中,解決CSS
存在的痛點(diǎn),從而提高我們效率。
我們可以通過(guò)變量來(lái)復(fù)用屬性值,比如顏色、邊框大小、圖片路徑等,這樣可以做到更改一處,從而進(jìn)行全局更改,從而實(shí)現(xiàn)“換膚”的功能。
實(shí)例1:我們的組件庫(kù),利用變量配置,進(jìn)行統(tǒng)一更改組件的顏色、字體大小等(換膚):
$color-primary: #3ecacb; $color-success: #4fc48d; $color-warning: #f3d93f; $color-danger: #f6588e; $color-info: #27c6fa;
實(shí)例2:圖片的配置及全局引入
Scss
中圖片的使用,可能存在以下2個(gè)問(wèn)題:
(1)如果樣式文件和使用該樣式文件的vue
文件不在同一目錄會(huì)出現(xiàn)圖片找不到
(2)如果將圖片路徑配置變量寫在vue
文件的style
中,但是該寫法導(dǎo)致圖片和樣式分離
我們可以采用將圖片路徑寫成配置文件,然后進(jìn)行全局引入,這樣可以統(tǒng)一更改圖片路徑(并且該方法只會(huì)在使用相應(yīng)圖片時(shí)進(jìn)行加載,不會(huì)導(dǎo)致額外性能問(wèn)題):
$common-path: './primary/assets/img/'; $icon-see: $common-path+'icon-see.png'; $icon-play: $common-path+'icon-play.png'; $icon-comment: $common-path+'icon-comment.png'; $icon-checkbox: $common-path+'icon-checkbox.png';
(1)Css
中的@import
規(guī)則,它允許在一個(gè)css
文件中導(dǎo)入其他css
文件。然而,后果是只有執(zhí)行到@import
時(shí),瀏覽器才會(huì)去下載其他css
文件,這導(dǎo)致頁(yè)面加載起來(lái)特別慢。
(2)Scss
中的@import
規(guī)則,不同的是,scss
的@import
規(guī)則在生成css
文件時(shí)就把相關(guān)文件導(dǎo)入進(jìn)來(lái)。這意味著所有相關(guān)的樣式被歸納到了同一個(gè)css
文件中,而無(wú)需發(fā)起額外的下載請(qǐng)求。
實(shí)例1:組件庫(kù)中統(tǒng)一將組件的樣式文件import
進(jìn)index.sccs
中,然后如果項(xiàng)目中有使用組件庫(kù)的地方只需要在項(xiàng)目的入口處,引入index.scss
文件,如下所示在index.scss
文件中引入各組件的樣式文件:
@import "./base.scss"; @import "./webupload.scss"; @import "./message-hint.scss";
scss
局部文件的文件名以下劃線開(kāi)頭。這樣,scss
就不會(huì)在編譯時(shí)單獨(dú)編譯這個(gè)文件輸出css
,而只把這個(gè)文件用作導(dǎo)入。在使用scss
時(shí),混合器mixins
是最適合的使用場(chǎng)景,因?yàn)榛旌掀鞑恍枰獑为?dú)編譯輸出css
文件。
實(shí)例1:將混合器的名稱寫成局部文件命名的方式
我們可以使用嵌套功能和父選擇器標(biāo)識(shí)符 & 來(lái)縮減重復(fù)的代碼,特別如果你CSS
類采用BEM
命名規(guī)范,樣式類命名存在冗長(zhǎng)的問(wèn)題。使用此功能,能解決BEM
命名冗長(zhǎng)的問(wèn)題,且樣式可讀性更高。
實(shí)例1:嵌套功能和父選擇器標(biāo)識(shí)符 & 解決BEM冗長(zhǎng)問(wèn)題:
.tea-assignhw { &__top { margin: 0; } &__content { padding-left: 45px; } &__gradeselect { width: 158px; } }
實(shí)例2:嵌套中使用子選擇器、兄弟選擇器和偽類選擇器
(1)子選擇器
&__hint { margin: 20px; font-size: 14px; > p:first-child { font-weight: bold; } }
(2)兄弟選擇器
&__input { width: 220px; & + span { margin-left: 10px; } }
(3)偽類選擇器
&__browse { background: url($btn-search) no-repeat; &:hover { background: url($btn-search) -80px 0 no-repeat; } &:visited { background: url($btn-search) -160px 0 no-repeat; } }
變量使你能夠復(fù)用屬性值,但如果想要復(fù)用一大段規(guī)則呢?傳統(tǒng)的做法是,如果在樣式表
中發(fā)現(xiàn)重復(fù),就會(huì)把公共的規(guī)則抽離出來(lái)放到新的CSS
類中。
在Scss
中可以使用混合器@mixin
和@extend
繼承指令來(lái)解決以上提到的復(fù)用一大段規(guī)則的場(chǎng)景。但兩者的使用場(chǎng)景又有啥區(qū)別呢?
(1)@mixin
主要的優(yōu)勢(shì)就是它能夠接受參數(shù)。如果想傳遞參數(shù),你會(huì)很自然地選擇@mixin
而不是@extend,因?yàn)?code>@extend不能夠接受參數(shù)
(2)因?yàn)榛旌掀饕?guī)則都混入到其他類中,所以在輸出的樣式表中不能完全避免重復(fù)。選擇器繼承的意思就是讓一個(gè)選擇器能夠復(fù)用另一個(gè)選擇器的所有樣式,但又不重復(fù)輸出這些樣式屬性;即使用@extend
產(chǎn)生 DRY CSS風(fēng)格的代碼(Don't repeat yourself)
綜上所述,如果你需要傳參數(shù),只能使用@mixin
混合器,否則用@extend
繼承來(lái)實(shí)現(xiàn)更優(yōu)。
實(shí)例1:@mixin混合器的使用
@mixin paneactive($image, $level, $vertical) { background: url($image) no-repeat $level $vertical; height: 100px; width: 30px; position: relative; top: 50%; } &--left-active { @include paneactive($btn-flip, 0, 0); } &--right-active { @include paneactive($btn-flip, 0, -105px); }
實(shí)例2:@extend繼承的使用
.common-mod { height: 250px; width: 50%; background-color: #fff; text-align: center; } &-mod { @extend .common-mod; float: right; } &-mod2 { @extend .common-mod; }
在@include
混合器時(shí)不必傳入所有的參數(shù),我們可以給參數(shù)指定一個(gè)默認(rèn)值,如果所需要傳的參數(shù)是 默認(rèn)值,則@include
時(shí)可以省略該參數(shù);如果所需要傳的參數(shù)不是默認(rèn)值,則@include
時(shí)則傳入新的參數(shù)。
實(shí)例1:@mixin混合器默認(rèn)參數(shù)值的使用
@mixin pane($dir: left) { width: 35px; display: block; float: $dir; background-color: #f1f1f1; } &__paneleft { @include pane; } &__paneright { @include pane(right); }
通過(guò) #{} 插值語(yǔ)句可以在選擇器或?qū)傩悦惺褂米兞?。?dāng)有兩個(gè)頁(yè)面的樣式類似時(shí),我們會(huì)將類似的樣式抽取成頁(yè)面混合器,但兩個(gè)不同的頁(yè)面樣式的命名名稱根據(jù)BEM
命名規(guī)范不能一樣,這時(shí)我們可使用插值進(jìn)行動(dòng)態(tài)命名。
實(shí)例1:頁(yè)面級(jí)混合器中的類名利用#{}插值進(jìn)行動(dòng)態(tài)設(shè)置
@mixin home-content($class) { .#{$class} { position: relative; background-color: #fff; overflow-x: hidden; overflow-y: hidden; &--left { margin-left: 160px; } &--noleft { margin-left: 0; } } }
SassScript
支持?jǐn)?shù)字的加減乘除、取整等運(yùn)算 (+, -, *, /, %)
實(shí)例1:input組件根據(jù)輸入框的高度設(shè)置左右內(nèi)邊距,如下所示:
.ps-input { display: block; &__inner { -webkit-appearance: none; padding-left: #{$--input-height + 10 }; padding-right: #{$--input-height + 10 }; } }
scss
自帶一些函數(shù),例如hsl
、mix
函數(shù)等。
實(shí)例1:button組件的點(diǎn)擊后顏色是將幾種顏色根據(jù)一定的比例混合在一起,生成另一種顏色。如下所示:
&:focus { color: mix($--color-white, $--color-primary, $--button-hover-tint-percent); border-color: transparent; background-color: transparent;} &:active { color: mix($--color-black, $--color-primary, $--button-active-shade-percent); border-color: transparent; background-color: transparent; }
@for
指令可以在限制的范圍內(nèi)重復(fù)輸出樣式,每次按變量的值對(duì)輸出結(jié)果進(jìn)行變動(dòng)。
實(shí)例1:例如項(xiàng)目中需要設(shè)置hwicon類底下第2到8個(gè)div子節(jié)點(diǎn)需設(shè)置樣式,如下所示:
@for $i from 2 through 8 { .com-hwicon { > div:nth-child(#{$i}) { position: relative; float: right; } } }
可通過(guò)結(jié)合each
遍歷、map
數(shù)據(jù)類型、@mixin/@include
混合器、#{}插值,從而生成不同的選擇器類,并且每個(gè)選擇器類中的背景圖片不同,如下所示:
$img-list: ( (accessimg, $papers-access), (folderimg, $papers-folder), (bmpimg, $papers-bmp), (xlsimg, $papers-excel), (xlsximg, $papers-excel), (gifimg, $papers-gif), (jpgimg, $papers-jpg), (unknownimg, $papers-unknown) ); @each $label, $value in $img-list { .com-hwicon__#{$label} { @include commonImg($value); } }
CSS
不能算是嚴(yán)格意義的編程語(yǔ)言,但是在前端體系中卻不能小覷。CSS
是以描述為主的樣式表,如果描述得混亂、沒(méi)有規(guī)則,對(duì)于其他開(kāi)發(fā)者一定是一個(gè)定時(shí)炸彈,特別是有強(qiáng)迫癥的人群。CSS
看似簡(jiǎn)單,想要寫出漂亮的 CSS
還是相當(dāng)困難。所以校驗(yàn) CSS
規(guī)則的行動(dòng)迫在眉睫。stylelint
是一個(gè)強(qiáng)大的現(xiàn)代 CSS
檢測(cè)器,可以讓開(kāi)發(fā)者在樣式表中遵循一致的約定和避免錯(cuò)誤。
(1)需要安裝gulp、stylelint、gulp-postscss 、 postcss-reporter、stylelint-config-standard,安裝命令為:
npm install gulp stylelint gulp-postscss postcss-reporter stylelint-config-standard--save-dev
(2)安裝完成后會(huì)在項(xiàng)目根目錄下創(chuàng)建gulpfile.js文件,文件gulpfile.js配置為:
var reporter = require('postcss-reporter'); var stylelint = require('stylelint'); var stylelintConfig = { 'extends': 'stylelint-config-standard', 'rules': { 'at-rule-no-unknown': [ true, { 'ignoreAtRules': [ 'extend', 'include', 'mixin', 'for' ] } ] } }; gulp.task('scss-lint', function() { var processors = [ stylelint(stylelintConfig), reporter({ clearMessages: true, throwError: true }) ]; return gulp.src( ['src/style/*.scss']// 需要工具檢查的scss文件 ).pipe(postcss(processors));}); gulp.task('default', ['scss-lint']);
(3) stylelint-config-standard 檢驗(yàn)規(guī)則
stylelint-config-standard
為stylelint
官方推薦的標(biāo)準(zhǔn)校驗(yàn)規(guī)則,具體校驗(yàn)規(guī)則有哪些內(nèi)容,可參照官網(wǎng)。
(4)運(yùn)行命令進(jìn)行樣式檢查
stylefmt
是一個(gè)基于 stylelint
的代碼修正工具,它可以基于stylelint
的代碼規(guī)范約定配置,對(duì)可修正的地方作格式化輸出。
(1)gulp.js配置文件如下:
var stylefmt = require('gulp-stylefmt'); // css格式自動(dòng)調(diào)整工具 gulp.task('stylefmt', function() { return gulp.src( ['src/style/student/index.scss' // 需要工具檢查的scss文件 ]).pipe(stylefmt(stylelintConfig)) .pipe(gulp.dest('src/style/dest/student'));}); gulp.task('fix', ['stylefmt']);
(2)運(yùn)行命令進(jìn)行樣式修復(fù)
初寫scss
代碼時(shí),由于對(duì)語(yǔ)法不熟悉等,寫出來(lái)的scss
代碼所得到的頁(yè)面效果,并不是我們想要的。這時(shí),我們可以使用gulp-sass
插件來(lái)監(jiān)聽(tīng)scss
代碼,實(shí)時(shí)生成css
代碼,從而可以通過(guò)查看css
代碼,來(lái)判斷所寫的scss
代碼是否正確。
(1)gulp.js配置文件如下:
var gulpsass = require('gulp-sass'); gulp.task('gulpsass', function() { return gulp.src('src/style/components/hwIcon.scss') .pipe(gulpsass().on('error', gulpsass.logError)) .pipe(gulp.dest('src/style/dest'));}); gulp.task('watch', function() { gulp.watch('src/style/components/hwIcon.scss', ['gulpsass']); });復(fù)制代碼復(fù)制代碼
(2)運(yùn)行命令從而監(jiān)聽(tīng)scss文件,動(dòng)態(tài)編譯scss代碼生成css代碼文件
到此,相信大家對(duì)“縮減SCSS 50%樣式代碼的方法有哪些”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。