如何使用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编译习惯，而不是简单的拘泥于变量嵌套~