SASS简介及使用方法

时间: 2018-08-06阅读: 1667标签: Sass

一、什么是Sass

Sass(Syntactically Awesome StyleSheets)是css的一个扩展开发工具,它允许你使用变量、条件语句等,使开发更简单可维护。这里是官方文档


二、基本语法

 1)变量

 sass的变量名必须是一个$符号开头,后面紧跟变量名。

//sass 样式
$red: #f00;
div {
   color: $red;   
}
// 编译为cssdiv {
    color:#f00;   
}


特殊变量:如果变量嵌套在字符串中,则需要写在 #{} 符号里面,如:

$top: top;
div {
    margin-#{$top}: 10px;       /* margin-top: 10px; */
}


默认变量:仅需在值后面加入 !default即可, 默认变量一般用来设置默认值,当该变量出现另外一个值时,无论定义先后,都会使用另外一个值,覆盖默认值

$color: red;
$color: blue !default;
div {
    color: $color;    /* color:red; */
}


多值变量:多值变量分为list类型和map类型,list有点像js对象中的数组,map类型像js中的对象

list : 可通过空格,逗号或小括号分割多个值,使用 nth($变量名, $索引)取值

//一维数据
$px: 5px 10px 20px 30px;
 
//二维数据,相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);
 
// 例子
$px: 10px 20px;
div {
    margin:nth($px, 1) 0 0 nth($px, 2);    /* margin:10px 0 0 20px; */
}


map: 数据以key和value组成,格式:$map: (key1: value1, key2: value2); 通过map-get($map, $key); 

$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}


2)计算功能

 sass允许使用算式。

div {
    padding: 2px * 4px;
    margin: (10px / 2);
    font-size: 12px + 4px;   
}


3)嵌套

标签嵌套

// sass 样式
div {
    color: #333;
    a {
       font-size:14px;
       &:hover {
          text-decoration:underline;
       }
    }
}
 
// 编译后css
div {
    color: #333;
}
div a {
    font-size:14px;
}
div a:hover {
    text-decoration:underline;
}


属性嵌套:

//sass 样式
.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}
 
//css 编译后样式
.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc;
}


 4)注释

 sass有两种注释风格

标准css注释: /* 注释 */, 会保留到编译后的文件中,压缩则删除

单行注释: // 注释

在标准注释 /*后面加入一个感叹号,表示重要注释,压缩模式也会保留注释,用于版权声明等。

/*! 重要注释 */


5)继承

sass 中,选择器继承可以让选择器继承另一个选择器的所有样式

// sass样式
h1 {
    font-size:20px;
}
div {
    @extend h1;
    color:red;
}
// css编译后样式
h1 {
    font-size:20px;
}
div {
    font-size:20px;
    color:red;
}


使用占位符选择器 % 

从sass3.2.0后,就可以定义占位选择器%,这个的优势在于,不调用不会有多余的css文件

// sass样式
%h1 {
    font-size:20px;
}
div {
    @extend %h1;
    color:red;
}
// css编译后样式
div {
    font-size:20px;
    color:red;
}


6)混合(mixin)

 sass中使用@mixin声明混合,可以传递参数,参数名义$符号开始,多个参数以逗号分开,如果参数有多组值,那么在变量后面加三个点表示,如: $var...

//sass 样式
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}
 
.opacity{
  @include opacity;      //参数使用默认值  50/100 = 0.5
}
.opacity-80{
  @include opacity(80); //传递参数  80/100 = 0.8
}
 
//  css编译后样式
.opacity{
  opacity: 0.5;
  filter: alpha(opacity=50);
}
 
// ---------------------
 
// 多参数
@mixin center($width, $height) {
    position: absolute;
    left:50%;
    top:50%;
    width:$width;
    height:$height;
    margin:(-$height / 2) 0 0 (-$width / 2);
}
div {
    @include center(200px, 100px);
}
// css编译后样式
div {
    position: absolute;
    left:50%;
    top:50%;
    width:200px;
    height:100px;
    margin:-50px 0 0 -100px;
}
 
// -------------------
 
//多组值
@mixin box-shadow($shadow...) {
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
}
div {
    @include box-shadow(0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4));
}
// css编译后样式
div {
    -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4);
    box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4);
}


@content:在sass3.2.0中引入, 可以用来解决css3中 @meidia 或者 @keyframes 带来的问题。它可以使@mixin接受一整块样式,接收的样式从@content开始

//sass 样式              
@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}
 
@include max-screen(480px) {
  body { color: red }
}
 
//css 编译后样式
@media only screen and (max-width: 480px) {
  body { color: red }
}


使用@content解决@keyframes关键帧的浏览器前缀问题

// 初始化变量
$browser: null;
// 设置关键帧
@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        $browser: '-webkit-'; @content;
    }
    @-moz-keyframes #{$name} {
        $browser: '-moz-'; @content;
    }
    @-o-keyframes #{$name} {
        $browser: '-o-'; @content;
    }
    @keyframes #{$name} {
        $browser: ''; @content;
    }
}
 
// 引入
@include keyframes(scale) {
    100% {
        #{$browser}transform: scale(0.8);
    }
}
 
// css编译后
@-webkit-keyframes scale {
    -webkit-transform: scale(0.8);
}
@-moz-keyframes scale  {
   -moz-transform: scale(0.8);
}
@-o-keyframes scale  {
    -o-transform: scale(0.8);
}
@keyframes scale  {
    transform: scale(0.8);
}


  

7)颜色函数

 sass提供了一些内置的颜色函数

lighten(#cc3, 10%)    // #d6d65c
darken(#cc3, 10%)    // #a3a329
grayscale(#cc3)     // #808080
complement(#cc3)    // #33c

 

8)引入外部文件

使用 @import 命令引入外部文件, 引入后,可使用外部文件中的变量等。

@import "_base.scss";


三、高级用法

1)函数 function

 sass允许用户编写自己的函数,以@function开始

$fontSize: 10px;
@function pxTorem($px) {
    @return $px / $fontSize * 1rem;
}
div {
    font-size: pxTorem(16px);
}
// css编译后样式
div {
    font-size: 1.6rem;
}


 2)if条件语句

  @if语句可以用来判断

// sass样式
$type: monster;
div {
    @if $type == ocean {
        color: blue;
    } @else if $type == matador {
        color: red;
    } @else if $type == monster {
        color: green;
    } @else {
        color: black;
    }
}
// css编译后样式
div {
    color: green;
}


三目判断:语法为 if($condition, $if_true, $if_false)。 三个参数分别表示: 条件,条件为真的值,条件为假的值

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px


3)循环语句

for循环有两种形式,分别为:@for $var from <start> through <end> 和 @for $var from <start> to <end>。 $var 表示变量,start表示开始值,end表示结束值,两种形式的区别在于 through 包括 end 的值,to 不包括 end 值。

// sass样式
@for $i from 1 to 4 {
    .item-#{$i} {width: 2em * $i;}
}
// css编译后样式
.item-1 {
    width: 2em;
}
.item-2 {
    width: 4em;
}
.item-3 {
    width: 6em;
}


while循环 

// sass样式
$i: 2;
@while $i > 0 {
    .item-#{$i} {width: 2em * $i;}
    $i: $i - 1;
}
// css编译后样式
.item-2 {
  width: 4em;
}
.item-1 {
  width: 2em;
}


@each循环:语法为@each $var in <list or map>。 其中$var表示变量,而list和map表示数据类型,sass3.3.0新加入多字段循环和map数据循环

单字段list数据循环

//sass 样式
$animal-list: puma, sea-slug, egret;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
//css 编译后样式
.puma-icon {
  background-image: url('/images/puma.png');
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
}
.egret-icon {
  background-image: url('/images/egret.png');
}


多字段list数据循环

//sass 样式
$animal-data: (puma, black, default),(sea-slug, blue, pointer);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}
//css 编译后样式
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default;
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer;
}


多字段map数据循环

//sass 样式
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}
//css 编译后样式
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.5em;
}
h3 {
  font-size: 1.2em;
}


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/980

关闭

Sass和Less的区别?

这篇文章主要解答以下几个问题,供前端开发者的新手参考。1、什么是Sass和Less?2、为什么要使用CSS预处理器?3、Sass和Less的比较4、为什么选择使用Sass而不是Less?

Sass 简介

Sass由hampton catlin设计,natalie weizenbaum于2006年开发,它可以免费下载和使用。Sass是一个将脚本解析成CSS的脚本语言(SassScript),也是一款CSS预处理器,它减少了CSS的重复

Sass 安装

Sass的系统需求:操作系统 - Sass是独立于平台的,浏览器支持 - Sass在Edge/IE(来自IE 8)、Frefox、Chrome、Safari、Opera中工作,编程语言 - Sass基于Ruby

Sass 导入

Sass 使 CSS代码保持DRY(也就是不要重复),编写代码的一种方式是将相关的代码保存在单独的文件中,我们可以创建带有CSS片段的小文件,以包含在其他Sass文件中,比如:重置文件、变量、颜色、字体或者是字体大小等等

SCSS提取和懒加载

本节课讲解在webpack v4中的 SCSS 提取和懒加载。值得一提的是,v4和v3在 Scss 的懒加载上的处理方法有着巨大差别。本节课主要涉及 SCSS 在懒加载下提取的相关配置和插件使用。

CSS预处理语言的模块化实践

编写css是前端工作中,一项普通而又频繁的劳动,由于css并不是一门语言,所以在程序设计上显得有些简陋。对于小型项目来说,css的量还不至于庞大,问题没有凸显,而如果要开发和持续维护一个较为大型的项目

Sass 嵌套

Sass 允许我们将以与html相同的方式嵌套css选择器,将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器,比如:嵌套功能避免了重复输入父选择器

webpack配置sass模块的加载

webpack管理的项目,我们希望用sass定义样式,为了正常编译,需要做如下配置。这里不讲webpack的入门,入门的文章,我推荐这篇《webpack入门》。为了使用sass,我们需要安装sass的依赖包

让 JavaScript 与 CSS 和 Sass 对话

JavaScript 和 CSS 已经并存超过了 20 年。但是在它们之间共享数据非常困难。当然也有大量的尝试。但是我所想到的是一些简单而直观的内容——不涉及结构更改,而是使用 CSS 自定义属性甚至 Sass 变量。

4种灵活的Scss编译输出风格整理

很多人从使用Scss的那一刻起,就被别人告诉了如何编译。所以,基本上也就只会一种命令编译方式。其实Scss提供了4种风格输出CSS,以满足更多人的需求。不同的输出方式如下:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!