預(yù)編譯語(yǔ)言 Sass Less Stylus之間的區(qū)別
- Less是基于JavaScript隅津，是在客戶(hù)端處理的未斑。其缺點(diǎn)是比起SASS來(lái)虹统，可編程功能不夠染簇，不過(guò)優(yōu)點(diǎn)是簡(jiǎn)單和兼容CSS。
- Sass是基于Ruby模燥，是在服務(wù)器端處理的咖祭。
- Stylus主要用來(lái)給Node項(xiàng)目進(jìn)行CSS預(yù)處理支持。語(yǔ)法自由度很高蔫骂。
了解 PostCSS
學(xué)習(xí)less
- npm install -g less
- lessc style.less style.css
嵌套規(guī)則
操作
- LESS支持一些算術(shù)運(yùn)算么翰，例如加號(hào)(+)，減號(hào)( - )辽旋，乘法(*)和除法(/)
@fontSize: 10px;
.myclass {
font-size: @fontSize * 2;
color:green;
}
轉(zhuǎn)義
- ?“some_text"中的任何內(nèi)容將顯示為 some_text
p {
color: ~"green";
}
函數(shù)
- 如圓函數(shù)浩嫌，floor函數(shù)，ceil函數(shù)戴已，百分比函數(shù)等。
@color: #FF8000;
@width:1.0;
.mycolor{
color: @color;
width: percentage(@width);
}
命名空間和訪(fǎng)問(wèn)器
- 它用于將mixins分組在通用名稱(chēng)下锅减。 使用命名空間可以避免名稱(chēng)沖突糖儡，并從外部封裝mixin組。
.class1 {
.class2 {
.val(@param) {
font-size: @param;
color:green;
}
}
}
.myclass {
.class1 > .class2 > .val(20px);
}
變量范圍
- 變量范圍指定可用變量的位置怔匣。 變量將從本地作用域搜索握联，如果它們不可用，則編譯器將從父作用域搜索每瞒。
@var: @a;
@a: 15px;
.myclass {
font-size: @var;
@a:20px;
color: green;
}
導(dǎo)入
@import "http://www.w3cschool.cn/less/myfile.less";
@import (less, optional) "custom.css";
變量
- @變量名：變量值
擴(kuò)展
-
&是父級(jí)選擇器的引用 - Extend是一個(gè)LESS偽類(lèi)金闽，它通過(guò)使用:extend 選擇器在一個(gè)選擇器中擴(kuò)展其他選擇器樣式。
h2 {
&:extend(.style);//給.style加上extend所在父級(jí)的樣式
font-style: italic;
}
.style {
background: green;
}
//編譯后
h2 {
font-style: italic;
}
.style,
h2 {
background: green;
}
.style:extend(.container, .img)
{
background: #BF70A5;
}
.container {
font-style: italic;
}
.img{
font-size: 30px;
}
.style {
background: #BF70A5;
}
.container,
.style {
font-style: italic;
}
.img,
.style {
font-size: 30px;
}
混合
- Mixins是一組CSS屬性剿骨，允許您將一個(gè)類(lèi)的屬性用于另一個(gè)類(lèi)代芜，并且包含類(lèi)名作為其屬性。
.p1{
color:red;
}
.p2{
background : #64d9c0;
.p1();
}
.p3{
background : #DAA520;
.p1;
}
.p1 {
color: red;
}
.p2 {
background: #64d9c0;
color: red;
}
.p3 {
background: #DAA520;
color: red;
}
混合參數(shù)
- 參數(shù)mixin使用一個(gè)或多個(gè)參數(shù)浓利，通過(guò)參數(shù)和其屬性來(lái)擴(kuò)展LESS的功能挤庇，以便在混合到另一個(gè)塊時(shí)自定義mixin輸出。
.border(@width; @style; @color) {
border: @width @style @color;
}
.myheader {
.border(2px; dashed; green);
}
將規(guī)則集傳遞給Mixins
@detached-ruleset: {
.mixin() {
font-family: "Comic Sans MS";
background-color: #AA86EE;
}
};
.cont {
@detached-ruleset();
.mixin();
}
.cont {
font-family: "Comic Sans MS";
background-color: #AA86EE;
}
Mixin Guards
.mixin (@a) when (lightness(@a) >= 50%) {
font-size: 14px;
}
.mixin (@a) when (lightness(@a) < 50%) {
font-size: 16px;
}
.mixin (@a) {
color: @a;
}
.class1 {
.mixin(#FF0000)
}
.class2 {
.mixin(#555)
}
.class1 {
font-size: 14px;
color: #FF0000;
}
.class2 {
font-size: 16px;
color: #555;
}
CSS Guards ???
@usedScope: global;
.mixin() {
@usedScope: mixin;
.cont when (@usedScope=global) {
background-color: red;
color: black;
}
.style when (@usedScope=mixin) {
background-color: blue;
color: white;
}
@usedScope: mixin;
}
.mixin();
.style {
background-color: blue;
color: white;
}
循環(huán)
.cont(@count) when (@count > 0) {
.cont((@count - 1));
width: (25px * @count);
}
div {
.cont(7);
}
div {
width: 25px;
width: 50px;
width: 75px;
width: 100px;
width: 125px;
width: 150px;
width: 175px;
}
