sass和compass基礎(chǔ)用法

paraller 發(fā)布于2019-08-30 15:55 / 1014人閱讀

摘要：一基本命令都是通過(guò)安裝，以下是一些基礎(chǔ)的命令移除的鏡像地址添加淘寶的鏡像查看鏡像單文件轉(zhuǎn)換命令單文件監(jiān)聽(tīng)命令監(jiān)聽(tīng)會(huì)自動(dòng)編譯文件夾監(jiān)聽(tīng)命令文件轉(zhuǎn)成文件在線轉(zhuǎn)換工具運(yùn)行命令行幫助文檔，可以獲得所有的配置選項(xiàng)表示解析后的

一、基本命令

sass都是通過(guò)gem安裝，以下是一些基礎(chǔ)的命令

移除ruby的鏡像地址
gem sources --remove https://rubygems.org/

添加淘寶的鏡像 
gem source -a http://ruby.taobao.org

查看鏡像 gem source -v

單文件轉(zhuǎn)換命令
sass style.scss style.css

單文件監(jiān)聽(tīng)命令（監(jiān)聽(tīng)會(huì)自動(dòng)編譯）
sass --watch style.scss:style.css

文件夾監(jiān)聽(tīng)命令
sass --watch sassFileDirectory:cssFileDirectory

css文件轉(zhuǎn)成sass/scss文件（在線轉(zhuǎn)換工具css2sass）
sass-convert style.css style.sass
sass-convert style.css style.scss

運(yùn)行命令行幫助文檔，可以獲得所有的配置選項(xiàng)
sass -h

--style表示解析后的css是什么格式，有四種取值分別為：nested，expanded，compact，compressed
sass --watch style.scss:style.css --style compact

----------------以下是compass-----------

compass創(chuàng)建一個(gè)編譯目錄，會(huì)生成config.rb文件，里面是一些配置
compass create sassAPP

compass編譯
compass compile
compass compile --force

compass監(jiān)視
compass watch
compass watch --force

二、sass基礎(chǔ)語(yǔ)法 1、變量

// 變量默認(rèn)值，默認(rèn)20px,但賦值后為18px
$fontsize:18px;
$fontsize:20px !default;
p {
  font-size: $fontsize; //18px
}

// 多值變量：可以直接使用，也可以當(dāng)做一個(gè)數(shù)組從中取值
$paddings:7px 10px 9px 8px;
$many:(color:red,font-size:24px,border:solid 1px blue); // 像是一個(gè)數(shù)組
.btn{
  padding:$paddings; // 直接使用
  padding-left:nth($paddings,2); // 當(dāng)做數(shù)組，從中取值
  background-color:map_get($many,color); // 當(dāng)做數(shù)組，從中取值
  border:map_get($many,border); // 當(dāng)做數(shù)組，從中取值
}
// 編譯后
.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;
}

// 變量中的下劃線和減號(hào)意義相同
$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;
}

// 鏈?zhǔn)嚼^承
.one{
  border:solid 1px red;
}
.two{
  @extend .one;
  color:blue;
}
.three{
  @extend .two;
  border-radius:5px;
}

// 占位選擇器 不會(huì)生成得到css中
%alert{
  color:green;
}
.alert-danger{
  @extend %alert;
}

3、數(shù)值類型和mixin

// 數(shù)字類型
$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;
}
// 函數(shù)功能，：blue可以去掉
@mixin cont1($color:blue){
  color:$color;
}
// 多參數(shù)函數(shù)
@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);
}

// 多數(shù)值函數(shù),變量個(gè)數(shù)可變
@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);
}

// 內(nèi)容傳遞
@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、函數(shù)、調(diào)試（一般也用不上）

// 自定義函數(shù)
@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{
    // 顏色加深函數(shù)
    color:darken($color,5);
    background-color:lighten($color,5);
    // 奇葩函數(shù)，誰(shuí)會(huì)這么用？
    z-index:str-length("hello world"); // 11
    a-index:str-index("abcdefg","d"); // 4
  }
}
// 測(cè)試判斷所用,控制臺(tái)輸出
// @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、條件語(yǔ)句、循環(huán)

// if三目運(yùn)算
$screenWidth:600px;
body{
  color:if($screenWidth>768px,blue,red);
}

// if條件語(yǔ)句
body{
  @if $screenWidth>768px{
    color:red;
  }@else if $screenWidth<500px{
    color:blue;
  }@else{
    color:green;
  }
}

// for循環(huán) through包含5，而to不包含5
@for $i from 1 through 5{
  span#{$i}{
    width:20%*$i;
  }
}

// while循環(huán)
$j:5;
@while $j>0{
  .div#{$j}{
    width:20%*$j;
  }
  $j: $j - 2;
}

// each常規(guī)遍歷
$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;
  }
}