sass的常用的一些语法介绍

最新推荐文章于 2024-10-01 23:20:42 发布

前端一枚

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量117

点赞数

分类专栏： sass 文章标签： sass css 前端

本文链接：https://blog.csdn.net/u011200562/article/details/123281001

版权

sass 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细介绍了Sass中嵌套规则、属性嵌套、变量使用、混合指令(@mixin)与扩展(@extend)的实用技巧，以及它们如何简化CSS编写并提升代码复用。特别关注了@extend在保持简洁性方面的优势。

摘要由CSDN通过智能技术生成

sass一些常用的规则

1、嵌套规则

.box{
    p{
        font-size:12px
    }
}

2、父选择器 &

  div {
    font-weight: bold;
    text-decoration: none;
    &:hover { text-decoration: underline; }
    a {
        font-weight: bold;
        &:hover { color: red; }
    }
  }

//编译成
div { font-weight: bold; text-decoration: none; }

div:hover { text-decoration: underline; }

div a { font-weight: bold; }

div a:hover { color: red; }

3、属性嵌套

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

//编译为
.funky { 
    font-family: fantasy; 
    font-size: 30em; 
    font-weight: bold; }

4、变量 $

$width: 10px
#main {
   width: $width;
}

//编译为
#main { width: 10px; }

5、混合指令@mixin

//不带参数
@mixin button {
    width:30px;
    height:15px;
    border-radius: 4px;
    font-size:14px;
    line-height:15px;
    text-align: center; 
  }
.btn_success {
    background:green;
    @include button;
  }
.btn_err {
    background:red;
    @include button;
  }
.btn_warning {
    background:yellow;
    @include button;
  }
.btn_default {
    background:#999;
    @include button;
  }

//编译为
.btn_success { background: green; width: 30px; height: 15px; border-radius: 4px; font-size: 14px; line-height: 15px; text-align: center; }

.btn_err { background: red; width: 30px; height: 15px; border-radius: 4px; font-size: 14px; line-height: 15px; text-align: center; }

.btn_warning { background: yellow; width: 30px; height: 15px; border-radius: 4px; font-size: 14px; line-height: 15px; text-align: center; }

.btn_default { background: #999; width: 30px; height: 15px; border-radius: 4px; font-size: 14px; line-height: 15px; text-align: center; }

//@mixin编译出来的CSS实在是糟糕，因为编译出来的CSS样式，没有把相同的样式合并在一起

//带参数
@mixin absolute($t: 0, $l: 0, $w: auto, $h: auto) {
    top: $t;
    left: $l;
    width: $w;
    height: $h;
    position: absolute;
  }
  
.box{
    @include absolute(10px, 20px, 100px, 100px)
}

//编译为
.box { top: 10px; left: 20px; width: 100px; height: 100px; position: absolute; }

@extend

.button {
    width:30px;
    height:15px;
    border-radius: 4px;
    font-size:14px;
    line-height:15px;
    text-align: center; 
  }
.btn_success {
    background:green;
    @extend .button;
  }
.btn_err {
    background:red;
    @extend .button;
  }
.btn_warning {
    background:yellow;
    @extend .button;
  }
.btn_default {
    background:#999;
    @extend .button;
  }

  //编译后
  .button, .btn_success, .btn_err, .btn_warning, .btn_default { width: 30px; height: 15px; border-radius: 4px; font-size: 14px; line-height: 15px; text-align: center; }

.btn_success { background: green; }

.btn_err { background: red; }

.btn_warning { background: yellow; }

.btn_default { background: #999; }


//1、相比@mixin编译,@extend编译后更简洁，@extend把相同样式都合并到了一起。
//2、如果我们在HTML中从来不使用.button，其存在的唯一目的就是为了扩展吗？这似乎比我们需要的基本样式稍大些，因为我们将永远不会使用.button对应的样式

%foo占位符

%button {
    width:30px;
    height:15px;
    border-radius: 4px;
    font-size:14px;
    line-height:15px;
    text-align: center; 
  }
.btn_success {
    background:green;
    @extend %button;
  }
.btn_err {
    background:red;
    @extend %button;
  }
.btn_warning {
    background:yellow;
    @extend %button;
  }
.btn_default {
    background:#999;
    @extend %button;
  }

//编译后
  .btn_success, .btn_err, .btn_warning, .btn_default { width: 30px; height: 15px; border-radius: 4px; font-size: 14px; line-height: 15px; text-align: center; }

.btn_success { background: green; }

.btn_err { background: red; }

.btn_warning { background: yellow; }

.btn_default { background: #999; }

@media和#foo占位符

使用@extend调用定义好的选择器占位符%foo有所限制，他不能在不同的@media中运行。

@media screen {
  .text3 {
    @extend %small-text;
  }
}

%small-text {
  font: {
    family: arial;
    size: 10px;
    weight: bold;
  }

  color: #f00;
}

//编译时报错
Compilation Error
Error: You may not @extend an outer selector from within @media.
       You may only @extend selectors within the same directive

修改为：

@media screen {
  %small-text {
    font: {
      family: arial;
      size: 10px;
      weight: bold;
    }

    color: #f00;
  }
}

.text3 {
  @extend %small-text;
}


//编译为
@media screen { .text3{ font-family: arial; font-size: 10px; font-weight: bold; color: #f00; } }