萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> div使用Sass編寫的方法

div使用Sass編寫的方法

歡迎大家在這裡學習div使用Sass編寫!下面是我們給大家整理出來的精彩內容。希望大家在這裡學習!

OOCSS不同於其他組織CSS代碼方法,比如SMACSS或者BEM。通過將CSS代碼和結構分離讓你的模塊可重用。事實上,我也通常將SMACSS與OOCSS混為一談。

OOCSS、SMACC和BEM在CSS中是很有內涵的東東,早就在W3cplus站點上有相關內容科普過。可以說理解了這些內容將能更好的幫助您組織、管理您的CSS代碼或者說CSS模塊。

什麼是對象?

在視覺是這是一個重復的模塊,可以將HTML、CSS和JavaSctrip獨立抽取出來,成為一個獨立的片段——Nicole Sullivan

將一個CSS對象抽取出來要考慮的第一件事情就是怎麼將樣式與結構分離出來,組織代碼的最佳方式是什麼?OOCSS的創始人Nicole Sllivan提了兩個主要原則:

結構與樣式分離:你應該在對象中定義結構和位置,而對於樣式特性應該使用類名分離出來,比如說background或border。這樣一來你就不需要去覆蓋一些特征性樣式。

容器與內容分離:不要在你的HTML結構中插入樣式。換句話說,你的樣式中盡量不要使用html標簽或者id標識符。相反,應該定義一些類名來定義樣式,而且選擇器的嵌套的層級應該盡量的少。

我們快速做一個示例

運用這些原則可能比較困難(理解理論的東西總是蛋疼的)。讓我們來看一個簡單的實例,看看是如何組織這樣的代碼:

CSS Code復制內容到剪貼板

/* 不好的方式 */

.box-1 {

border: 1px solid #ccc;

width: 200px;

height: 200px;

border-radius: 10px;

}

.box-2 {

border: 1px solid #ccc;

width: 120px;

height: 120px

border-radius: 10px;

}

你不難發現,有一些重復的樣式出現。在這個例子中,border樣式在兩個類中都定義了。如果你想改變border-radius或border屬性值時,不得不在兩個地方修改。

為了解決這個問題,把這個樣式放在另一個新增加的類名中:

CSS Code復制內容到剪貼板

/* 好的方式 */

.box-1 {

width: 200px;

height: 200px;

}

.box-2 {

width: 120px;

height: 120px;

}

.box-border{

border: 1px solid #CCC;

border-radius: 10px;

}

在HTML結構中,我們可以這樣使用:

XML/HTML Code復制內容到剪貼板

Lorem ipsum

Lorem ipsum

語義化和維護

你在意沒有語義化,而我更關心的是代碼的維護。比如說這個示例所示。

純CSS來定義對象就沒有語義化,但這樣就存在一些問題:

每次改為樣式風格時,都需要修改HTML

沒有一種安全的方式來訪問DOM元素

對於OOCSS來說,除了維護HTML比較困難之外,其他都是很完美的。我們的CSS很容易擴展,也非常方便用於新的內容中。

因此我們寫了部分CSS代碼用於在HTML結構中進行擴展。這樣的方式真的會變得更好?

Sass的到來

我可以肯定你肯定聽過Sass的@extend命令和了解他是如何工作的。因此,要非常感謝選擇器的占位符%placeholder,在Sass中可以通過@extend來擴展,如此一來在CSS就是可以創建一些有語義化的類名,也解決了HTML中的存在的問題。

我們必須使用%placeholder來創建對象,通過@extend在類中調用,將其合在一起。這樣就可以自己組織代碼:

CSS Code復制內容到剪貼板

/* 不好的方式 */

a.twitter {

min-width: 100px;

padding: 1em;

border-radius: 1em;

background: #55acee

color: #fff;

}

span.facebook {

min-width: 100px;

padding: 1em;

border-radius: 1em;

background: #3b5998;

color: #fff;

}

所有的對象都使用@extend和基本對象混合在一起,這樣就可以得到一個干淨的CSS對象,在Sass中是十分容易的事情,我們也不必要再花時間來修改HTML。

CSS Code復制內容到剪貼板

/* 好的方式 */

%button {

min-width: 100px;

padding: 1em;

border-radius: 1em;

}

%twitter-background {

color: #fff;

background: #55acee;

}

%facebook-background {

color: #fff;

background: #3b5998;

}

.btn {

&--twitter {

@extend %button;

@extend %twitter-background;

}

&--facebook {

@extend %button;

@extend %facebook-background;

}

}

好了,div使用Sass編寫內容就給大家介紹到這裡了。希望大家繼續關注我們的網站!

相關推薦:

使用css實現圓角圖形繪制的方法

copyright © 萬盛學電腦網 all rights reserved