如何使用sass

Posted 丹妮娃儿

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用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编译习惯,而不是简单的拘泥于变量嵌套~

以上是关于如何使用sass的主要内容,如果未能解决你的问题,请参考以下文章

使用 bootstrap-sass 时我应该如何管理 sass 代码?

关于SASS的一些碎碎念

如何将Sass编译成CSS

如何将Sass编译成CSS

如何将 SaSS 用于 ASP.NET MVC 应用程序?

如何在 Angular 中使用带有 SASS 的 Bootstrap 4