sass基础语法

最新推荐文章于 2022-10-18 22:32:50 发布

Whj_s

最新推荐文章于 2022-10-18 22:32:50 发布

阅读量792

点赞数 1

分类专栏：工具

本文链接：https://blog.csdn.net/a8845/article/details/69372603

版权

工具专栏收录该内容

4 篇文章 0 订阅

订阅专栏

语法学习链接：sass语法 http://www.w3cplus.com/sassguide/syntax.html

文件后缀：.sass/.scss。

文件导入：sass的导入(@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。

所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import "mixin"。

@import 'base';

注释：同js。

变量：必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。

变量分类：普通变量、默认变量、特殊变量。

普通变量：以$开头跟着变量名：变量值。

默认变量：与普通变量的区别在于在变量值后面加了！default。

特殊变量：当变量值为‘字符串’的时候，也充当属性名属性值，例：

$borderDirection: border-top !default;
$baseFontSize: 12px !default;
$baseLineHeight: 1.5 !default;
.#{$borderDirection}{
  #{$borderDirection}: 1px solid #ccc;
}
body{
  font: #{$baseFontSize}/#{$baseLineHeight};
}

多值变量：分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。

list类型：list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值。关于list数据操作还有很多其他函数如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等。

sass

$linkColor: #08c #333 !default;
a{
  color:nth($linkColor,1);
  &:hover{
    color: nth($linkColor,2);
  }
}

css

a {
  color: #08c; }
  a:hover {
    color: #333; }

map数据： map数据以key和value成对出现，其中value又可以是list。格式为： $map: (key1: value1, key2: value2, key3: value3); 。可通过 map-get($map,$key) 取值。关于map数据还有很多其他函数如 map-merge($map1,$map2) ， map-keys($map) ， map-values($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; }

@each 类似jq中的each遍历函数，提出属性值，后面的in类似。

补充：

$styling: (
  'font-family': 'Lato',
  'font-size': 1.5em,
  'color': tomato,
  'background': black
);

h1 {
  color: map-get($styling, 'color');
  background: map-get($styling, 'background');
}

上面的示例创建了一个名为 $styling 的 map ，这个Map中对应的键值是用来定义不同的CSS属性。

Sass中的Map有很多不同的函数功能，可以使用它们可以操作Map或提取值。比如这里使用的 map-get 函数，它接受两个参数，第一个是Map的名称 $styling ，第二个是你想需要取的值的 key 值。

嵌套： sass的嵌套包括两种，一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。

选择器嵌套

所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。

在选择器嵌套中，可以使用&表示父元素选择器

sass

#top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color: #333;
  li{
    float: lfet;
  }
  a{
    display: block;
    padding: 0 10px;
    color: #fff;
    &:hover{
      color: #ddd;
    }
  }
}

css

#top_nav {
  line-height: 40px;
  text-transform: capitalize;
  background-color: #333; }
  #top_nav li {
    float: lfet; }
  #top_nav a {
    display: block;
    padding: 0 10px;
    color: #fff; }
    #top_nav a:hover {
      color: #ddd; }

属性嵌套

所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。

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; }

@at-root

sass3.3.0中新增的功能，用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。

普通跳出嵌套

没跳出

sass

.parent-1{
  color: #f00;
  .child{
    width: 100px;
  }
}

css

.parent-1 {
  color: #f00; }
  .parent-1 .child {
    width: 100px; }

单个选择器跳出

sass

.parent-2{
  color: #f00;
  @at-root .child {
    width: 100px;
  }
}

css

.parent-2 {
  color: #f00; }
  .child {
    width: 100px; }

多个选择器跳出

sass

.paren-3 {
  background: #f00;
  .child-1{
    width: 100px;
    @at-root {
      .child1 {
        width: 300px;
        height: 200px;
      }
      .child2 {
        width: 300px;
        height: 100px;
      }
    }
  }
}

css

.paren-3 {
  background: #f00; }
  .paren-3 .child-1 {
    width: 100px; }
    .child1 {
      width: 300px;
      height: 200px; }

    .child2 {
      width: 300px;
      height: 100px; }

@at-root (without: ...)和@at-root (with: ...)

默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root (without: media)，@at-root (without: support)。这个语法的关键词有四个：all（表示所有），rule（表示常规css），media（表示media），support（表示support，因为@support目前还无法广泛使用，所以在此不表）。我们默认的@at-root其实就是@at-root (without:rule)。

跳出父级

sass

@media print {
  .parent1{
    color: #f00;
    @at-root .child1 {
      width: 200px;
    }
  }
}

css

@media print {
  .parent1 {
    color: #f00; }
    .child1 {
      width: 200px; } }

跳出media嵌套，父级有效

sass

@media print {
  .parent2{
    color: #f00;
    @at-root (without: media) {
      .child2 {
        width: 200px;
      }
    }
  }
}

css

@media print {
  .parent2 {
    color: #f00; } }
  .parent2 .child2 {
    width: 200px; }

完全跳出

将上述代码中@at-root(without: media)改为@at-root(without: all)就可以完全跳出。

可以将@at-root看成一个内置对象，without: media可看成触发的某些方法。

@at-root与&配合使用

sass

.child {
  @at-root .parent & {
    color: #f00;
  }
}

css

.parent .child {
  color: #f00; }

应用于@keyframe，制作动画时代码不至于太过凌乱。

sass

.demo {
  animation: motion 3s infinite;
  @at-root {
    @keyframes motion {
      0%{
        width: 100px;
      }
      100%{
        width: 200px;
      }
    }
  }
}

css

.demo {
  animation: motion 3s infinite; }
@keyframes motion {
  0% {
    width: 100px; }
  100% {
    width: 200px; } }

混合（mixin）

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。

无参数@mixin

sass

@mixin center-block {
  margin-left: auto;
  margin-right: auto;
}
.demo {
  @include center-block;
}

css

.demo {
  margin-left: auto;
  margin-right: auto; }

有参数@mixin。类似函数一样@mixin相当于声明，@include相当于调用，传参相当于将参数属性值修改。

sass

@mixin opacity($opacity: 50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}
.opacity {
  @include opacity;
}
.opacity-80 {
  @include opacity(80);
}

css

.opacity {
  opacity: 0.5;
  filter: alpha(opacity=50); }

.opacity-80 {
  opacity: 0.8;
  filter: alpha(opacity=80); }

多个参数

sass

@mixin horizontal-line($border: 1px solid #ccc, $padding: 10px){
  border-bottom: $border;
  padding-top: $padding;
  padding-bottom: $padding;
}
.imgtext-h li{
  @include horizontal-line(1px solid #ccc,20px);
  ul li div{
    .child{
      @include horizontal-line;
    }
  }
}

css

.imgtext-h li {
  border-bottom: 1px solid #ccc;
  padding-top: 20px;
  padding-bottom: 20px; }
  .imgtext-h li ul li div .child {
    border-bottom: 1px solid #ccc;
    padding-top: 10px;
    padding-bottom: 10px; }

多组参数，

box-shadow($shadow...)

参数中三个点必须要有而且必须刚好是三个点。

sass

@mixin box-shadow($shadow...){
  -moz-box-shadow: $shadow;
  -ms-box-shadow: $shadow;
  -o-box-shadow: $shadow;
  -webkit-box-show: $shadow;
  box-shadow: $shadow;
}
.box {
  border: 1px solid #ccc;
  @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3))
}

css

.box {
  border: 1px solid #ccc;
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 3px 3px rgba(0, 0, 0, 0.3);
  -ms-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 3px 3px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 3px 3px rgba(0, 0, 0, 0.3);
  -webkit-box-show: 0 2px 2px rgba(0, 0, 0, 0.3), 0 3px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 3px 3px rgba(0, 0, 0, 0.3); }

@content

@content在sass3.2.0中引入，可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式，接受的样式从@content开始。暂时无法完全转译成css？。

sass

@mixin max-screen($res){
  @meida only screen and ( max-width: $res){
    @content;
  }
}
@include max-screen(480px){
  body { color: red; }
}

css

@meida only screen and ( max-width: $res) {
  body {
    color: red; } }

继承

sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。

sass

h1 {
  border: 4px solid #ff9aa9;
}
.speak {
  @extend h1;
  border-width: 2px;
}

css

h1, .speak {
  border: 4px solid #ff9aa9; }

.speak {
  border-width: 2px; }

占位选择器`% 不能用？？？、`

从sass 3.2.0以后就可以定义占位选择器%。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。

函数

sass定义了很多函数可供使用，当然你也可以自己定义函数，以@fuction开始。

实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。

sass

$baseFontSize: 10px !default;
$gray: #ccc !default;
@function pxToRem($px) {
  @return $px / $baseFontSize * 2rem;
}
body {
  font-size: $baseFontSize;
  color: lighten($gray, 10%);
}
.test {
  font-size: pxToRem(16px);
  color: darken($gray, 10%);
}

css

body {
  font-size: 10px;
  color: #e6e6e6; }

.test {
  font-size: 3.2rem;
  color: #b3b3b3; }

运算

sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。

sass

$baseFontSize: 14px !default;
$baseLineHeight: 2 !default;
$baseGap: $baseFontSize * $baseLineHeight;
$halfBaseGap: $baseGap / 2 !default;
body{
  font-size:$halfBaseGap;
}

css

body {
  font-size: 14px; }

条件判断及循环

@if判断

@if 可一个条件单独使用，也可以和 @else 结合多条件使用

sass

$lte7: true;
$type: ocean;
.ib {
  display: inline-block;
  @if $lte7 {
    *display: inline;
    *zoom: 1;
  }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

css

.ib {
  display: inline-block;
  *display: inline;
  *zoom: 1; }

p {
  color: blue; }

三目判断

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

sass

$lte7: false;
$type: ocean;
$px: if($lte7, 10px, 20px);
p {
  height: $px;
}

css

p {
  height: 20px; }

for循环

for循环有两种形式，分别为： @for $var from <start> through <end> 和 @for $var from <start> to <end> 。$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。

sass

@for $i from 1 through 3 {
  .item-#{$i} {width: 2em * $i;}
}

css

.item-1 {
  width: 2em; }

.item-2 {
  width: 4em; }

.item-3 {
  width: 6em; }

@each循环

语法为： @each $var in <list or map> 。其中 $var 表示变量，而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。

单个字段list数据循环

sass

$animal-list: puma, sea-slug, egret, salamander;
@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"); }

.salamander-icon {
  background-image: url("/images/salamander.png"); }

多个字段list数据循环

@each $animal, $color, $cursor in $animal-data {

@each 后面的变量与$animal-data数据结构内变量数量等同。在不等同的情况下，结果类似js函数传参，不等的情况下一致。

sass

$animal-data: (puma, black, default), (sea,bule,pointer), (egret, white, move);
@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-icon {
  background-image: url("/images/sea.png");
  border: 2px solid bule;
  cursor: pointer; }

.egret-icon {
  background-image: url("/images/egret.png");
  border: 2px solid white;
  cursor: move; }

多个字段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; }

完。

Whj_s

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
sass基础语法

语法学习链接：sass语法 http://www.w3cplus.com/sassguide/syntax.html文件后缀：.sass/.scss。文件导入：sass的导入(@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import 'reset.css'，那效果跟普通CSS导
复制链接

扫一扫