如何使用sass
Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、mixin、导入等众多功能， 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好， 同时也让你能够快速开始小型项目， 特别是在搭配 Compass 样式库一同使用时。但是作为一名自己摸索的前端，初探sass就让我了解到他的强大，但是到现在我最常用的仅仅是嵌套？所以在这里我检讨一下自己，并对、梳理一下常用的sass。
我们公司用的是gulp编译sass,现在我个人习惯于用命令行编译，刚开始的时候也用过Koala编译软件，说实话，个人觉得命令行更简单方便。
一直监控编译，只要有保存更改就会立即编译 sass --watch xx.scss:xx.css
不同样式风格的输出方法
嵌套输出方式 nested sass --watch test.scss:test.css --style nested
展开输出方式 expanded sass --watch test.scss:test.css --style expanded
紧凑输出方式 compact sass --watch test.scss:test.css --style compact
压缩输出方式 compressed sass --watch test.scss:test.css --style compressed
sass --watch scss:css --style compressed --sourcemap=none 这个就是不生成soucemap文件
这里就拿在项目中用到的几个例子简单的介绍下吧
1.变量
$color:red;
p{
$color:blue;
color:$color;//blue
}
a{ color:$color;//blue }
2.嵌套规则
&-1{
left: rem-calc(45);
top: rem-calc(50);
&:after{
$size:rc(290);
width: $size;
height: $size;
background-size: $size $size;
top:rc(-30);
left: rc(10)
}
3.mixin使用（常见css3效果）
@mixin ss-pic($width,$height,$pos-left,$pos-top){
width: $width;
height: $height;
background-position: $pos-left $pos-top;
}
@mixin rounded($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
@mixin shadow($x, $y, $blur, $color) {
-webkit-box-shadow: $x $y $blur $color;
-moz-box-shadow: $x $y $blur $color;
box-shadow: $x $y $blur $color;
}
@mixin shadow-inset($x, $y, $blur, $color) {
-webkit-box-shadow: inset $x $y $blur $color;
-moz-box-shadow: inset $x $y $blur $color;
box-shadow: inset $x $y $blur $color;
}
@mixin transition($property) {
-webkit-transition: $property .2s ease;
-moz-transition: $property .2s ease;
-o-transition: $property .2s ease;
transition: $property .2s ease;
}
@mixin box-sizing {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@mixin linear-gradient($from, $to) {
/* Fallback for sad browsers */
background-color: $to;
/* Mozilla Firefox */
background-image:-moz-linear-gradient($from, $to);
/* Opera */
background-image:-o-linear-gradient($from, $to);
/* WebKit (Chrome 11+) */
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, $from), color-stop(1, $to));
/* WebKit (Safari 5.1+, Chrome 10+) */
background-image: -webkit-linear-gradient($from, $to);
/* IE10 */
background-image: -ms-linear-gradient($from, $to);
/* W3C */
background-image: linear-gradient($from, $to);
}
@mixin gra($begin,$end){
zoom: 1;
background-image: -webkit-gradient(linear, left top, left bottom, from($begin), to($end));
background-image: -webkit-linear-gradient(top, $begin, $end);
background-image: -moz-linear-gradient(top, $begin, $end);
background-image: -ms-linear-gradient(top, $begin, $end);
background-image: -o-linear-gradient(top, $begin, $end);
background-image: linear-gradient(top, $begin, $end);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr="#{ie-hex-str($begin)}", EndColorStr="#{ie-hex-str($end)}");
}
@mixin opacityColor($color,$trans){
$rgba: rgba($color, $trans);
background: $rgba;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr="#{ie-hex-str($rgba)}", EndColorStr="#{ie-hex-str($rgba)}");
.ie9 &{
filter: none;
}
}
@mixin opacityImage($path){
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src="#{$path}");
}
@mixin opacityGif($path){
_background-image: url("#{$path}");
}
@mixin stretchedImage($path){
background-size: 100% 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="#{$path}", sizingMethod="scale");
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="#{$path}", sizingMethod="scale");
}
@mixin rotate($degrees){
zoom: 1;
//-ms-filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)});
//filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)});
-moz-transform: rotate($degrees);
-o-transform: rotate($degrees);
-webkit-transform: rotate($degrees);
-ms-transform: rotate($degrees);
transform: rotate($degrees);
}
@mixin scale($x, $y){
zoom: 1;
-moz-transform: scale($x, $y);
-o-transform: scale($x, $y);
-webkit-transform: scale($x, $y);
-ms-transform: scale($x, $y);
transform: scale($x, $y);
}
@mixin flexbox(){
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
}
@mixin flexboxChild($num:1){
-webkit-box-flex: $num; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: $num; /* OLD - Firefox 19- */
-webkit-flex: $num; /* Chrome */
-ms-flex: $num; /* IE 10 */
flex: $num;
width:0;
display:block; /* fix input Bug */
}
@mixin boxShadow($param){
-moz-box-shadow: $param;
-webkit-box-shadow: $param;
box-shadow: $param;
}
@mixin boxShadowParameters($xNum,$yNum,$blurNum,$color,$style...){
-webkit-box-shadow: $xNum $yNum $blurNum $color $style;
-moz-box-shadow: $xNum $yNum $blurNum $color $style;
-ms-box-shadow: $xNum $yNum $blurNum $color $style;
-o-box-shadow: $xNum $yNum $blurNum $color $style;
box-shadow: $xNum $yNum $blurNum $color $style;
}
@mixin hack($name, $value){
-moz-#{$name}: $value;
-webkit-#{$name}: $value;
#{$name}: $value;
}
@mixin horizontalCenter{
@include hack(box-align, center);
@include hack(justify-content, center);
}
@mixin verticalCenter{
@include hack(box-pack,center);
@include hack(align-items,center);
}
@mixin horizontalCenterNew{
@include hack(box-pack,center);
@include hack(justify-content, center);
}
@mixin verticalCenterNew{
@include hack(box-align, center);
@include hack(align-items,center);
}
@mixin setTransition($style,$time,$function:linear,$delay:0s){
-webkit-transition:$style $time $function $delay;
-moz-transition:$style $time $function $delay;
-o-transition:$style $time $function $delay;
transition:$style $time $function $delay;
}
a,li,input,button,section,span,div{
-webkit-tap-highlight-color: unquote('rgba(0,0,0,0)');
-moz-tap-highlight-color: unquote('rgba(0,0,0,0)');
-o-tap-highlight-color: unquote('rgba(0,0,0,0)');
-ms-tap-highlight-color: unquote('rgba(0,0,0,0)');
tap-highlight-color: unquote('rgba(0,0,0,0)');
}
.ss-pic{
$width:rc(215);
$height:rc(195);
$pos-left:rc(-242);
$pos-top:0;
@include ss-pic($width,$height,$pos-left,$pos-top);
}
4.default
$imageVersion : true !default; // 开启图片版本号
$version : 20171206 !default; // 设置总版本号 > [单独频道可独立设置$version]
$absPath : false !default; // 开启绝对路径
$bodyBgColor : #be1008 !default; // 设置body背景色
$bodyColor : #000 !default; // 设置body字体颜色
$font-family : sans-serif; // 设置文字字体
5.extend和%
%fl {
float: left;
_display: inline;
}
%fr {
float: right;
_display: inline;
}
%dis-inb {
display: inline-block;
*display: inline;
*zoom: 1;
vertical-align: middle;
}
.icon{
@extend %dis-inb;
overflow: hidden;
}
6.function函数
$img:'../../../images/activity/2018newyear';
$version:'?20171206';
/// Asset URL builder
@function asset($type, $file) {
@return url($img + $type + '/' + $file + $version);
}
/// Image asset helper
@function images($file) {
@return asset('', $file);
}
p{background: images('shenshou.png') no-repeat;}
sass是很强大的，大家不要因为习惯与css的编写方式就不去探索它，希望自己以后可以养成良好的sass编译习惯，而不是简单的拘泥于变量嵌套~
