一、基本命令
移除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:cssFileDirectory
css文件转成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 sassAPP
compass编译
compass compile
compass compile --force
compass监视
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'); // 11
a-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;
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。