一、基本命令

• sass都是通過gem安裝，以下是一些基礎的命令

移除ruby的鏡像地址 gem sources --remove https://rubygems.org/添加淘寶的鏡像 gem source -a http://ruby.taobao.org查看鏡像 gem source -v單文件轉換命令 sass style.scss style.css單文件監聽命令（監聽會自動編譯） sass --watch style.scss:style.css文件夾監聽命令 sass --watch sassFileDirectory:cssFileDirectorycss文件轉成sass/scss文件（在線轉換工具css2sass） sass-convert style.css style.sass sass-convert style.css style.scss運行命令行幫助文檔，可以獲得所有的配置選項 sass -h--style表示解析后的css是什么格式，有四種取值分別為：nested，expanded，compact，compressed sass --watch style.scss:style.css --style compact----------------以下是compass-----------compass創建一個編譯目錄，會生成config.rb文件，里面是一些配置 compass create sassAPPcompass編譯 compass compile compass compile --forcecompass監視 compass watch compass watch --force

二、sass基礎語法

1、變量

// 變量默認值，默認20px,但賦值后為18px $fontsize:18px; $fontsize:20px !default; p {font-size: $fontsize; //18px }// 多值變量：可以直接使用，也可以當做一個數組從中取值 $paddings:7px 10px 9px 8px; $many:(color:red,font-size:24px,border:solid 1px blue); // 像是一個數組 .btn{padding:$paddings; // 直接使用padding-left:nth($paddings,2); // 當做數組，從中取值background-color:map_get($many,color); // 當做數組，從中取值border:map_get($many,border); // 當做數組，從中取值 } // 編譯后 .btn {padding: 7px 10px 9px 8px;padding-left: 10px;background-color: red;border: solid 1px blue; }// 局部變量和全局變量 body{// 局部變量，不能用在footer中$color:red;color:$color;// 全局變量$font-size:16px !global; } footer{// color:$color; // 不可以使用局部變量font-size: $font-size; // 可以使用全局變量 }// 變量用在選擇器上 $className:main; .#{$className}{margin:10px;padding:5px; }// 變量中的下劃線和減號意義相同 $text-info:blue; $text_info:red; section{color:$text-info; }

2、嵌套和繼承

body{background-color:red;// 選擇器嵌套header{background-color:green;}// 屬性嵌套footer{background:{color:red;size:100% 50%;}}a{// 引用父選擇器&:hover{color:blue;}&.contain{background-color:yellow;}} }// 繼承與多繼承 .alert{background-color: #FED; } .small{font-size:12px; } .alert-info{@extend .alert;@extend .small;// 用以下方法代替// @extend .alert,.small; }// 鏈式繼承 .one{border:solid 1px red; } .two{@extend .one;color:blue; } .three{@extend .two;border-radius:5px; }// 占位選擇器 不會生成得到css中 %alert{color:green; } .alert-danger{@extend %alert; }

3、數值類型和mixin

// 數字類型 $n1:1.2; $n2:12; $n3:14px; .body{font-size:$n3; } // 字符串類型 $s1:container; $s2:'container'; $s3:"container"; .#{$s1}{font-size:$n3; } // 布爾類型 $bt:true; $bf:false;// null類型 $null:null; body{@if($null==null){color:red;} } // 顏色類型 $c1:blue; $c2:#fff; $c3:rgba(255,255,0,0.5); body{color:$c3; }// 加減乘除 $width1:12px; $width2:13px; body{width:$width1+$width2;.header{width:$width1 -$width2;} } a:before{content:'A'+bc; } a:before{content:A+'bc'; } p{padding:3px + 4px auto; }$version:3; p:before{// 使用變量的方法content:'hello,sass #{$version}' } p{font-size:20px/10px;font-size:(20px/10px);width:$width2/2;height:round($width2)/2; }// 引用片段 @mixin cont{color:red;font-size:18px; } // 函數功能，：blue可以去掉 @mixin cont1($color:blue){color:$color; } // 多參數函數 @mixin cont2($color,$font-size){color:$color;font-size:$font-size; } body{@include cont;@include cont1(green);@include cont2(green,20px); } p{@include cont2($font-size:good,$color:green); }// 多數值函數,變量個數可變 @mixin box-shadow($box-shadow...){-webkit-box-shadow: $box-shadow;-moz-box-shadow: $box-shadow;box-shadow: $box-shadow; } body{@include box-shadow(2px 2px 0px blue,-2px -2px 0px green); }// 內容傳遞 @mixin style-for-iphone{@media only screen and (max-width:768px) and (min-width:240px){margin: 10px;@content;} } @include style-for-iphone{font-size:24px;background-color:#fff; } // 編譯后 @media only screen and (max-width: 768px) and (min-width: 240px) {margin: 10px;font-size: 24px;background-color: #fff; }

4、函數、調試（一般也用不上）

// 自定義函數 @function double($width){@return $width*2; } .container{width:double(5px); }$color:rgb(255,0,255); body{color:$color;background-color:rgba(255,255,0,0.5);border-color:rgba($color,0.5);width:500px;height:500px;p{// 顏色加深函數color:darken($color,5);background-color:lighten($color,5);// 奇葩函數，誰會這么用？z-index:str-length('hello world'); // 11a-index:str-index('abcdefg','d'); // 4} } // 測試判斷所用,控制臺輸出 // @debug 'This is a debug test'; // @warn 'Warn'; // @error 'Error'; @function Three($width){@if($width>3){@error '$width is error';}@return $width*3; } body{width:#{Three(2)}px;; // 6px }@function getIndex($layer:default){$zIndexMap:(default:1,modal:100,dropdown:500,grid:300);$z-index:1;@if map-has_key($zIndexMap,$layer) {$z-index:map_get($zIndexMap,$layer);}@return $z-index; } p{z-index:getIndex(modal);z-index:getIndex(abc); } // 編譯后 p {z-index: 100;z-index: 1; }

5、條件語句、循環

// if三目運算 $screenWidth:600px; body{color:if($screenWidth>768px,blue,red); }// if條件語句 body{@if $screenWidth>768px{color:red;}@else if $screenWidth<500px{color:blue;}@else{color:green;} }// for循環 through包含5，而to不包含5 @for $i from 1 through 5{span#{$i}{width:20%*$i;} }// while循環 $j:5; @while $j>0{.div#{$j}{width:20%*$j;}$j: $j - 2; }// each常規遍歷 $k:1; @each $c in red blue green yellow{.section#{$k}{background-color:$c;}$k:$k+1; }// each list遍歷 @each $key,$color in (default,blue),(info,green),(danger,red){.text-#{$key}{background-color:$color;} }// each map遍歷 @each $key,$color in (default:blue,info:green,danger:red){.label-#{$key}{background-color:$color;} }@function screenDivide($Num){$num:$Num;$map:(defaultvalue:0);@for $i from 1 to $num{$mapValue:(#{$i}:percentage(1/$num)*$i);$map:map-merge($map,$mapValue);}$map:map_remove($map,defaultvalue);@return $map; } @each $key,$value in screenDivide(5){.slider#{$key}{width:$value;} }

總結

以上是生活随笔為你收集整理的sass和compass基础用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。