sass中常用的mixin封裝
- 網(wǎng)站整體居中
@mixin site-center($width: 960px) {
width: $width;
margin: 0 auto;
}
- clearfix清除浮動
@mixin clearfix() {
&before,
&after {
content: '';
display: table;
}
}
- 圓角邊框
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
- 瀏覽器前綴
@mixin css3($property, $value) {
@each $prefix in -webkit-,
-moz-,
-ms-,
-o-,
'' {
#{$prefix}#{$property}: $value;
}
}
- 動畫keyframes生成
@mixin keyframes($animationName) {
@-webkit-keyframes #{$animationName} {
@content;
}
@-moz-keyframes #{$animationName} {
@content;
}
@-o-keyframes #{$animationName} {
@content;
}
@keyframes #{$animationName} {
@content;
}
}
- 文本溢出用...顯示
@mixin text-ellipsis () {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
text-overflow:ellipsis屬性來實現(xiàn)單行文本的溢出顯示省略號(…)送淆。當(dāng)然部分瀏覽器還需要加寬度width屬性
- 純css實現(xiàn)三角形
/* 箭頭
arrow(direction, size, color);
*/
@mixin arrow($direction, $size, $color) {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
overflow: hidden;
border-width: $size;
cursor: pointer;
@if $direction == top {
border-style: dashed dashed solid dashed;
border-color: transparent transparent $color transparent;
border-top: none;
}
@else if $direction == bottom {
border-style: solid dashed dashed dashed;
border-color: $color transparent transparent transparent;
border-bottom: none;
}
@else if $direction == right {
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent $color;
border-right: none;
}
@else if $direction == left {
border-style: dashed solid dashed dashed;
border-color: transparent $color transparent transparent;
border-left: none;
}
}
- 媒體查詢
@mixin screen($min,$max){
@media screen and (min-width:$min) and (max-width: $max){
@content; //@content代表內(nèi)容是自定義的
}
}
@mixin min-screen($width){
@media screen and (min-width: $width){
@content;
}
}
@mixin max-screen($width){
@media screen and (max-width: $width){
@content;
}
}
Sass中的mixin和%placeholder的本質(zhì)區(qū)別
- mixin基本用法
@mixin box($width: 100px, $height: 100px) {
width: $width;
height: $height;
box-shadow: 0 0 5px black;
margin: 10px;
}
.smallBox {
@include box(100px, 100px);
}
.bigBox {
@include box(200px, 200px);
}
編譯后的代碼：
.smallBox {
width: 100px;
height: 100px;
box-shadow: 0 0 5px black;
margin: 10px;
}
.bigBox {
width: 200px;
height: 200px;
box-shadow: 0 0 5px black;
margin: 10px;
}
可以看到振坚，Mixin不過是將代碼復(fù)制了一塊
- %placeholder的基本用法
%placeholder 與 Mixin 差不多寒波，但是不能傳入?yún)?shù)屯远。而且他不是直接復(fù)制代碼塊，而是將共有的屬性提到前面呢铆，然后使用這兩個 div 的選擇器一起去調(diào)用水慨。
%box {
box-shadow: 0px 0px 5px black;
margin: 10px;
}
.smallBox {
@extend %box;
width: 100px;
height: 100px;
}
.bigBox {
@extend %box;
width: 200px;
height: 200px;
}
編譯后的代碼：
.smallBox, .bigBox {
box-shadow: 0px 0px 5px black;
margin: 10px;
}
.smallBox {
width: 100px;
height: 100px;
}
.bigBox {
width: 200px;
height: 200px;
}
總結(jié)
我們會發(fā)現(xiàn)湿颅，在編譯后蔚叨，%placeholder會幫我們把重復(fù)引用的代碼進行合并是钥，但是使用mixin的時候并不會，并且缅叠，不能%placeholder不能傳遞參數(shù)，只能定義一段重復(fù)的代碼段虏冻，而mixin可以傳參數(shù)肤粱，封裝一些需要傳參數(shù)的代碼
利用placeholder進行性能優(yōu)化
- 通過上面的比較，我們可以知道厨相，利用%placeholder能將重復(fù)代碼合并的特性领曼，將現(xiàn)有的css重復(fù)樣式抽離出來，根據(jù)代碼的塊的不同拆分成多個不同的%placeholder
大型項目的sass目錄該如何組織
通過搜索相關(guān)資料蛮穿，總結(jié)出以下幾個構(gòu)建文件的目錄以及其詳情:
- Base
base/ 文件夾包含了項目中一些相關(guān)的基礎(chǔ)樣式庶骄，比如normalize.css和一些關(guān)于文本排版方面的
- Helpers
helpers/文件夾（或utils/）主要包含了項目中關(guān)于Sass的工具和幫助之類。在里面放置了我們需要使用的_function.scss践磅，和_mixin.scss单刁。在這里還包含了一個_variables.scss文件（有的地方也稱其為_config.scss），這里包含項目中所有的全局變量（比如排版本上的府适，配色方案等等）羔飞。
_variables.scss
_mixin.scss
_function.scss
_placeholders.scss(也有稱為_helpers.scss)
- Layout
layout/文件夾(有時也稱為partials/)中放置了大量的文件，每個文件主要用于布局方面的檐春，比如說"header"逻淌，“footer”等。他也會包括_grid.scss文件疟暖，用來創(chuàng)建網(wǎng)格系統(tǒng)卡儒。
_grid.scss
_header.scss
_footer.scss
_sidebar.scss
_forms.scss
- Components
對于一些小組件田柔，都放在了components/文件夾（通常也稱為modules/）
_media.scss
_carousel.scss
_thumbnails.scss
- Page
如果你需要針對一些頁面寫特定的樣式，我想將他們放在page/文件夾中骨望，并且以頁面的名稱來命名硬爆。例如，你的首頁需要制作一個特定的樣式锦募，那么你就可以在page/文件夾中創(chuàng)建一個名叫_home.scss文件摆屯。
- Themes
要為一個大型的網(wǎng)站制作多個主題，那么有一個theme/文件夾是非常有意義的糠亩。你可以把主題相關(guān)的文件放在這個文件夾中虐骑。
_theme.scss
_admin.scss
- Vendors
主要用來包含來自外部的庫和框架的CSS文件。比如Bootstrap,jQueryUI赎线。把這些文件放在同一個文件夾中廷没。
例如：
bootstrap.scss
jquery-ui.scss
config.rb的其它配置項及作用
# import-once 保證后面如果重復(fù)引用了模塊，那么只會使用一次垂寥，雖然引用了多次颠黎，但不會報錯
# 例如 import 'compass/reset' ... import 'compass/reset' 只會使用一次
# 但是如果真的需要引用兩次，那么怎么辦呢滞项？這樣寫 import 'compass/reset!' 在后面添加 !
require 'compass/import-once/activate'
# 可以使用compass-normalize來替換掉原來的compass/reset
require 'compass-normalize'
# 解析后的顯示方式
# 如果項目即將上線狭归，就需要壓縮CSS以確保文件盡可能的小，這時候只需要把output_style設(shè)置為：compressed
# output_style = :expanded or :nested or :compact or :compressed
output_style = :expanded
# 樣式打包發(fā)布后的根目錄
http_path = "/"
# 存放css文件的目錄
css_dir = "css"
# 存放sass的目錄
sass_dir = "sass"
# 存放圖片的目錄文判，當(dāng)在css或者sass中引入的時候过椎，不需要加上img這個目錄
images_dir = "img"
# 存放js的文件目錄
javascripts_dir = "js"
# 取消生成注釋
line_comments=true
# 當(dāng)我們編譯Sass文件時，在我們的根目錄會出現(xiàn).sass-cache文件夾戏仓，看文件夾名就知道這里放的該是Sass緩存文件疚宇，設(shè)置為true可以幫我們加快sass文件的編譯
cache = true
# 使用相對路徑進行查找文件
# relative_assets = true
# 設(shè)置開發(fā)或者生產(chǎn)環(huán)境
# enviroment = :production :development
# 設(shè)置偏向的語法 :sass :scss
# preferred_syntax = :sass
