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的更多相关文章

  1. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  2. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  3. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  4. 前端CSS预处理器Sass

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  5. SASS教程sass超详细教程

    SASS安装及使用(sass教程.详细教程) 采用SASS开发CSS,可以提高开发效率. SASS建立在Ruby的基础之上,所以得先安装Ruby. Ruby的安装: 安装 rubyinstaller- ...

  6. Sass之坑Compass编译报错

    前段时间在使用Compass时遇到了其为难处理的一个坑,现记录到博客希望能帮助到各位. 一.问题: 利用Koala或者是gulp编译提示如下,截图为koala编译提示错误: 二.解决办法 从问题截图上 ...

  7. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

  8. Sass用法指南

    写在前面的话:随着CSS文件越来越大,内容越来越复杂,对其进行很好的维护将变的很困难.这时CSS预处理器就能够帮上大忙了,它们往往拥有变量.嵌套.继承等许多CSS不具备的特性.有很多CSS预处理器,这 ...

  9. PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用

    如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器.不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass.Stylus或LESS)结合起来使用. 有几个PostCS ...

  10. Sass:初识Sass与Koala工具的使用

    一.下载Koala(找到合适的系统版本)并安装 二.先新建一个css文件夹,并在里面新建一个文本文档(.txt),将其命名为demo.scss 三.打开Koala,将css文件夹拽进来,可以修改一下输 ...

随机推荐

  1. Android SDK和NDK

    NDK是用来给安卓手机开发软件用的,但是和SDK不同的是它用的是C语言,而SDK用的是Java语言.NDK开发的软件在安卓的环境里是直接运行的,一般只能在特定的CPU指令集的机器上运行,而且C语言可以 ...

  2. stack_2.由两个栈组成队列

    思路: 用两个栈($stack_a, $stack_b),当push的时候,压入$stack_a, 让pop的时候,先把$stack_a元素依次全部倒入$stack_b中,再对$stack_b进行po ...

  3. java中interface 的特性

    有时必须从几个类中派生出一个子类,继承它们所有的属性和方法.但是,Java不支持多重继承.有了接口,就可以得到多重继承的效果. 接口(interface)是抽象方法和常量值的定义的集合.从本质上讲,接 ...

  4. 1111 Online Map (30)(30 分)

    Input our current position and a destination, an online map can recommend several paths. Now your jo ...

  5. MySQL-with rollup函数运用 _20160930

    在博客里http://www.cnblogs.com/Mr-Cxy/p/5898839.html提到了行转列, 如果想在下面这个表下面添加一行 总计 数据行SQL代码怎么实现 并且根据9月金额进行城市 ...

  6. C# 对象间的 深拷贝 实现

        以下的这个类实现了 2个含有部分字段名字相同 的对象的 赋值拷贝. public class ShallowCopyHelper     {         public static voi ...

  7. vijos:P1190繁忙的都市

    描述 城市C是一个非常繁忙的大都市,城市中的道路十分的拥挤,于是市长决定对其中的道路进行改造.城市C的道路是这样分布的:城市中有n个交叉路口,有些交叉路口之间有道路相连,两个交叉路口之间最多有一条道路 ...

  8. POJ1502(最短路入门题)

    MPI Maelstrom Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 7471   Accepted: 4550 Des ...

  9. 【转】Pro Android学习笔记(二):开发环境:基础概念、连接真实设备、生命周期

    在Android学习笔记(二):安装环境中已经有相应的内容.看看何为新.这是在source网站上的Android架构图,和标准图没有区别,只是这张图颜色好看多了,录之.本笔记主要讲述Android开发 ...

  10. ng2父子模块数据交互

    一.父模块向子模块传值 //父html <my-child [childdata]="parentdata"></my-child> 其中,my-child ...