scss

scss

SASS是CSS3的一个扩展,增加了规则嵌套、变量、混合、选择器继承等等。

在SCSS中使用变量

$blue: #3bbfce;

$margin: 16px;


.content-navigation {

  border-color: $blue;

  color:

darken($blue, 9%);

}


.border {

  padding: $margin / 2;

  margin: $margin / 2;

  border-color: $blue;

}

转换成CSS如下:

/* CSS */

.content-navigation {

  border-color: #3bbfce;

  color: #2b9eab;

}


.border {

  padding: 8px;

  margin: 8px;

  border-color: #3bbfce;

}

SCSS嵌套:

table.hl {

  margin: 2em 0;

  td.ln {

text-align: right;

  }

}


li {

  font: {

family: serif;

weight: bold;

size: 1.2em;

  }

}

转换成CSS如下:

/* CSS */


table.hl {

  margin: 2em 0;

}

table.hl td.ln {

  text-align: right;

}


li {

  font-family: serif;

  font-weight: bold;

  font-size: 1.2em;

}

使用@mixin命令,定义一个代码块。

  @mixin left {
    float: left;
    margin-left: 10px;
  }

使用@include命令,调用这个mixin。

  div {
    @include left;
  }

循环语句

SASS支持for循环:

  @for $i from 1 to 10 {
    .border-#{$i} {
      border: #{$i}px solid blue;
    }
  }

也支持while循环:

  $i: 6;

  @while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 2;
  }

each命令,作用与for类似:

  @each $member in a, b, c, d {
    .#{$member} {
      background-image: url("/image/#{$member}.jpg");
    }
  }

循环语句

SASS支持for循环:

  @for $i from 1 to 10 {
    .border-#{$i} {
      border: #{$i}px solid blue;
    }
  }

也支持while循环:

  $i: 6;

  @while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 2;
  }

each命令,作用与for类似:

  @each $member in a, b, c, d {
    .#{$member} {
      background-image: url("/image/#{$member}.jpg");
    }
  }

posted on   tang-磊  阅读(224)  评论(0编辑  收藏  举报

编辑推荐:
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 从 Windows Forms 到微服务的经验教训
· 李飞飞的50美金比肩DeepSeek把CEO忽悠瘸了,倒霉的却是程序员
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

统计

点击右上角即可分享
微信分享提示