使用Sass的Mixin實現自動新增瀏覽器字首

2021-08-18 21:50:06 字數 2000 閱讀 9556

解決每次打某些css3樣式需要加各種瀏覽器字首這一麻煩問題。

當乙個瀏覽器實現乙個新的屬性、值或者選擇器,而這個特徵還不是處於候選推薦標準狀態的時候,這屬性的前面會新增乙個字首以便於它的渲染引擎識別。 

通俗一點來說,就是當官方標準還沒有最終確定之前,部分瀏覽器根據最初的草案實現了部分css樣式,然後使用自己的私有字首以便與標準進行區分,同時也便於自己的渲染引擎識別。 

因此,要一直到官方標準正式確定,可以支援某個新的css樣式了,這時候就可以去掉字首,被所有的主流瀏覽器所使用。

字首瀏覽器

-moz-

火狐等使用mozilla瀏覽器引擎的瀏覽器

-webkit-

safari, 谷歌瀏覽器等使用webkit引擎的瀏覽器

-o-opera瀏覽器

-ms-

internet explorer

sass是一種css的開發工具,提供了許多便利的寫法,大大節省了設計者的時間,使得css的開發,變得簡單和可維護。sass號稱世界上最成熟最穩定最強大的專業級css擴充套件語言(官網說的)。

使用sass前肯定需要先安裝它(安裝指南),然後可以看看阮一峰老師寫的sass用法指南 。

混合指令(mixin)用於定義可重複使用的樣式,避免了使用無語意的 class,比如 .float-left。混合指令可以包含所有的 css 規則,絕大部分 sass 規則,甚至通過引數功能引入變數,輸出多樣化的樣式。

混合指令的用法是在@mixin後新增名稱與樣式。比如:

@mixin large-text 

color: #ff0000;

}

使用 @include 指令引用混合樣式,格式是在其後新增混合名稱,以及需要的引數(可選):

.page-title
上面的**將會被編譯成:

.page-title
// 預設將輸出webkit字首,moz字首和標準

@mixin prefixer($property, $value, $prefixes: webkit moz) : $value;

@each

$prefix

in$prefixes :#;

}@else

if$prefix == moz :#;

}@else

if$prefix == o :#;

}@else

if$prefix == ms :#;

}}}

首先遍歷引數$prefixes,依次輸出引數裡面包含的字首名,接著使用插值語句#{}輸出包含瀏覽器字首的屬性名加屬性值,這就輸出了乙個完整的包含瀏覽器字首的樣式了,最後輸出不帶字首的標準寫法。 

值得注意的是,在 @mixin 指令中給引數$prefixes設定了預設值「 webkit moz 」,這樣,當我們沒有輸入第三個引數的時候,就預設輸出輸出webkit字首moz字首不帶字首的標準的寫法

#main
編譯為:

#main

當然,如果只想預設輸出webkit字首,moz字首和標準寫法,我們可以這樣寫:

#main
編譯為:

#main
當然這只是部分而已,還有其他一些css3屬性需要加瀏覽器字首。

sass中常用的mixin

瀏覽器字首 例子 include css3 transition,0.5s mixin css3 property,value value retina mixin image 2x image,width,height 清除浮動 引用例子 include clearfix mixin clearf...

vue的mixin的使用

對乙個專案中很多會重複使用到的函式我們可以使用到vue的mixin 混入 這樣就不需要在多個頁面中重複的書寫相同的 1.定義乙個mixin mixin.js const mixin created methods export default mixin 使用mixin 1.區域性使用 import...

vue的mixin的使用

混入 mixins 是一種分發vue元件中可復用功能的非常靈活的方式。混入物件可以包含任意元件選項。當元件使用混入物件時,所有混入物件的選項將被混入該元件本身的選項。以上是官網的定義,mixin的作用是多個元件可以共享資料和方法,在使用mixin的元件中引入後,mixin中的方法和屬性也就併入到該元...