asp学校网站系统,中国商业网,株洲渌口区,四川聚锋建设工程有限公司官方网站一、基本命令 sass都是通过gem安装#xff0c;以下是一些基础的命令移除ruby的镜像地址
gem sources --remove https://rubygems.org/添加淘宝的镜像
gem source -a http://ruby.taobao.org查看镜像 gem source -v单文件转换命令
sass style.scss style.css单文件监听命令以下是一些基础的命令移除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是什么格式有四种取值分别为nestedexpandedcompactcompressed
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($nullnull){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:Abc;
}
a:before{content:Abc;
}
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($width3){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($screenWidth768px,blue,red);
}// if条件语句
body{if $screenWidth768px{color:red;}else if $screenWidth500px{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 $j0{.div#{$j}{width:20%*$j;}$j: $j - 2;
}// each常规遍历
$k:1;
each $c in red blue green yellow{.section#{$k}{background-color:$c;}$k:$k1;
}// 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;}
}
