sass 简介

最新推荐文章于 2024-01-23 10:58:32 发布
最新推荐文章于 2024-01-23 10:58:32 发布
阅读量192 收藏
点赞数
文章标签： javascript ruby json ViewUI
原文链接：https://segmentfault.com/a/1190000011517802
版权

SASS简介

安装

Windows

  1. 安装Ruby (https://rubyinstaller.org/dow...

  2. 安装SASS

    • 打开cmd命令，输入一下命令
    gem install sass

常用的sass命令

    //更新sass
    gem update sass

    //查看sass版本
    sass -v

    //查看sass帮助
    sass -h

语法格式

sass有两种语法格式

  1. .sass文件（最早的语法格式。也被称为缩进格式）
  2. .scss文件（css通用语法）

数据类型

SassScript 支持 6 种主要的数据类型：

  1. 数字，1, 2, 13, 10px
  2. 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
  3. 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
  4. 布尔型，true, false
  5. 空值，null
  6. 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
  7. maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

SassScript 也支持其他 CSS 属性值，比如 Unicode 字符集，或 !important 声明。然而Sass 不会特殊对待这些属性值，一律视为无引号字符串。

注释

在 Sass 中注释有两种方式

  1. 类似 CSS 的注释方式，使用 ”/ ”开头，结属使用 ”/ ”
  2. 类似 JavaScript 的注释方式，使用“//”
    两者区别
  • 前者会在编译出来的 CSS 显示
  • 后者在编译出来的 CSS 中不会显示

变量

注：变量声明：不区分中划线和下划线
例如：$h_color和$h-color是同一个变量

变量声明

  1. 普通变量 $name:100px;
  2. 默认变量$name:100px !default;

变量调用

  1. 直接调用 $top
  2. 作为属性 #{$top} 也称之为 插值

示例

$width: 100px;
$top: top;
.box{
    width: $width
    border-#{$top}: 1px solid red;
    #{$top}:20px;
}

编译后

.box { 
    width: 100px;
    border-top: 1px solid red;
    top: 20px; 
}

嵌套

  1. 选择器嵌套
  2. 属性嵌套
  3. 伪类嵌套

1. 选择器嵌套

  • & 父级选择器
  • > 子级选择器
  • + 相邻选择器
  • ~ 同级选择器

示例:

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top:0;}
  &:hover{color:red;}
}

编译后

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }
article :hover{color:red;}

2. 属性嵌套

CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。

假设你的样式中用到了：

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

在 Sass 中我们可以这样写：

.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

3. 伪类嵌套

其实伪类嵌套和属性嵌套非常类似，只不过他需要借助&符号一起配合使用。我们就拿经典的“clearfix”为例吧：

.clearfix{
    &:before,
    &:after {
        content:"";
        display: table;
    }
    &:after {
        clear:both;
        overflow: hidden;
    }
}

编译出来的 CSS：

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
    overflow: hidden;
}

混合宏 / 继承 / 占位符

各自优缺点及使用

  • 混合宏

    • 优点：可以传参数
    • 缺点：不会自动合并相同的样式代码
    • 使用：如果你的代码块中涉及到变量，建议使用混合宏

  • 继承

    • 优点：继承选择器定义样式的基类，不需要单独定义。可以合并相同的代码
    • 缺点：不能传参，不管调用或不调用都会编译
    • 使用：如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在。

  • 占位符

    • 优点：基类不会被编译
    • 缺点：需要单独定义基类

总结
总结

1. 混合宏

声明
使用@mixin来声明一个混合宏。如：

@mixin border{
    border: 1px solid red;
    border-radius: 5px;
}

调用
通过@include来调用声明好的混合宏

.box{
    @include border;
}

传参
参数用于给混合指令中的样式设定变量，并且赋值使用。在定义混合指令的时候，按照变量的格式，通过逗号分隔，将参数写进圆括号里。引用指令时，按照参数的顺序，再将所赋的值对应写进

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: solid;
  }
}
p { @include sexy-border(blue, 1px); }

混合指令也可以使用给变量赋值的方法给参数设定默认值，然后，当这个指令被引用的时候，如果没有给参数赋值，则自动使用默认值

@mixin sexy-border($color, $width: 1px) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(red); }
h1 { @include sexy-border(red, 2px); }

编译为：

p {
  border-color: red;
  border-width: 1px;
  border-style: solid; 
}
h1 {
  border-color: red;
  border-width: 2px;
  border-style: solid;
}

关键词参数
混合指令也可以使用关键词参数，上面的例子也可以写成:
注：关键词参数不需要按照参数顺序传参，可以打乱顺序使用

p { 
    @include sexy-border($color: blue);
}
h1 { 
    @include sexy-border($color: blue, $width: 2px);
}
h2 { 
    @include sexy-border($width: 2px , $color: blue);
}

传参（不确定个数）
有时，不能确定混合指令需要使用多少个参数，比如一个关于 box-shadow 的混合指令不能确定有多少个 shadow 会被用到。这时，可以使用参数变量 … 声明（写在参数的最后方）告诉 Sass 将这些参数视为值列表处理：

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

编译为

.shadowed {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

参数变量也可以用在引用混合指令的时候 (@include)，与平时用法一样，将一串值列表中的值逐条作为参数引用：

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

编译为

.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

2. 继承

在 Sass 中是通过关键词 @extend来继承已存在的类样式块，从而实现代码的继承。如下所示：

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

编译后

.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
}

.btn-second {
  background-clor: orange;
  color: #fff;
}

3. 占位符

Sass 中的占位符 % 功能是一个很强大，很实用的一个功能，这也是我非常喜欢的功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。来看一个演示：

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

这段代码没有被 @extend 调用，他并没有产生任何代码块，只是静静的躺在你的某个 SCSS 文件中。只有通过 @extend 调用才会产生代码：

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}

编译出来的css

.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}

运算

1. 数字运算 + - * / %

  • 注：除法运算
    / 在 CSS 中通常起到分隔数字的用途，SassScript 作为 CSS 语言的拓展当然也支持这个功能，同时也赋予了/ 除法运算的功能。也就是说，如果 / 在 SassScript 中把两个数字分隔，编译后的 CSS 文件中也是同样的作用。

以下三种情况 / 将被视为除法运算符号：

  • 如果值，或值的一部分，是变量或者函数的返回值
  • 如果值被圆括号包裹
  • 如果值是算数表达式的一部分
p {
  font: 10px/8px;             // 纯 CSS，不是除法运算
  width: $width/2;            // 使用了变量，是除法运算
  width: round(1.5)/2;        // 使用了函数，是除法运算
  height: (500px/2);          // 使用了圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}

编译出来的CSS

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px;
 }

2. 关系运算 < > <= >= == !=

3.颜色值运算

颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值：

p {
  color: #010203 + #040506;
}

计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，然后编译为

p {color: #050709; }

控制命令

@if

@if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else 一起使用。

@mixin blockOrHidden($boolean:true) {
  @if $boolean {
      @debug "$boolean is #{$boolean}";
      display: block;
    }
  @else {
      @debug "$boolean is #{$boolean}";
      display: none;
    }
}

.block {
  @include blockOrHidden;
}

.hidden{
  @include blockOrHidden(false);
}

编译出来的CSS:

.block {
  display: block;
}

.hidden {
  display: none;
}

@for 循环

循环，这个指令包含两种格式

  1. @for $i from <start> through <end>

  2. @for $i from <start> to <end>

    • $i 表示变量
    • start 表示起始值
    • end 表示结束值

区别在于 through 与 to 的含义

  • 当使用 through 时，条件范围包含 <start> 与 <end> 的值
  • 使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值
  • 另外，$i 可以是任何变量
  • 注：<start> 和 <end> 必须是整数值

@while循环

@while 指令也需要 SassScript 表达式（像其他指令一样），并且会生成不同的样式块，直到表达式值为 false 时停止循环。这个和 @for 指令很相似，只要 @while 后面的条件为 true 就会执行。

这里有一个 @while 指令的简单用例：

$types: 4;
$type-width: 20px;

@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}

编译出来的 CSS

.while-4 {
  width: 24px;
}

.while-3 {
  width: 23px;
}

.while-2 {
  width: 22px;
}

.while-1 {
  width: 21px;
}

@each循环

@each 循环就是去遍历一个列表，然后从列表中取出对应的值。

@each 循环指令的形式：

 @each $var in <list>

这有一个 @each 指令的简单示例：

$list: adam john wynn mason kuroir;//$list 就是一个列表

@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}

.author-bio {
    @include author-images;
}

编译出 CSS:

.author-bio .photo-adam {
  background: url("/images/avatars/adam.png") no-repeat; }
.author-bio .photo-john {
  background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn {
  background: url("/images/avatars/wynn.png") no-repeat; }
.author-bio .photo-mason {
  background: url("/images/avatars/mason.png") no-repeat; }
.author-bio .photo-kuroir {
  background: url("/images/avatars/kuroir.png") no-repeat; }

内置函数

  1. 字符串函数
  2. 数字函数
  3. 列表函数
  4. Introspection 函数
  5. Miscellaneous(三元)函数等
  6. Map函数
  7. 颜色函数

1. 字符串函数

  • unquote($string) 删除字符串中的引号。
  • quote($string) 给字符串添加引号。
  • To-upper-case($string) 小写字母转换成大写字母
  • To-lower-case($string) 大写字母转换成小写字母

2. 数字函数

  • percentage($value) 将一个不带单位的数转换成百分比值
  • round($value)将数值四舍五入，转换成一个最接近的整数
  • ceil($value) 将大于自己的小数转换成下一位整数
  • floor($value) 将一个数去除他的小数部分
  • abs($value) 返回一个数的绝对值
  • min($numbers…) 找出几个数值之间的最小值
  • max($numbers…) 找出几个数值之间的最大值
  • random() 获取随机数（0~1）

3.列表函数

  • length($list) 返回一个列表的长度值
  • nth($list, $n) 返回一个列表中指定的某个标签值（序号从1开始）
  • join($list1, $list2, [$separator]) 将两个列给连接在一起，变成一个列表
  • append($list1, $val, [$separator]) 将某个值放在列表的最后
  • zip($lists…) 将几个列表结合成一个多维的列表
  • index($list, $value) 返回一个值在列表中的位置值（序号从1开始）

4.Introspection函数

  • type-of($value) 返回一个值的类型

    • number 为数值型。
    • string 为字符串型。
    • bool 为布尔型。
    • color 为颜色型。
  • unit($number) 返回一个值的单位
  • unitless($number) 判断一个值是否带有单位
  • comparable($number-1, $number-2) 判断两个值是否可以做加、减和合并

5. Miscellaneous函数

在这里把 Miscellaneous 函数称为三元条件函数，主要因为他和 JavaScript 中的三元判断非常的相似。他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值：

if($condition,$if-true,$if-false)

6. Map函数

Sass 的 map 常常被称为数据地图，也有人称其为数组，因为他总是以 key:value 成对的出现，但其更像是一个 JSON 数据。

那么 Sass 的 map 长得与 JSON 极其相似：

$map: (
    $key1: value1,
    $key2: value2,
    $key3: value3
)

获取值

  • map-get($map,$key) 根据给定的 key 值，返回 map 中相关的值。
  • map-merge($map1,$map2) 将两个 map 合并成一个新的 map。
  • map-remove($map,$key) 从 map 中删除一个 key，返回一个新 map。
  • map-keys($map) 返回 map 中所有的 key。
  • map-values($map) 返回 map 中所有的 value。
  • map-has-key($map,$key) 根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。
  • keywords($args) 返回一个函数的参数，这个参数可以动态的设置 key 和 value。

实例

$social-colors: (
    dribble: #ea4c89,
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);
.btn-dribble{
  color: map-get($social-colors,facebook);
}

编译出来的CSS：

.btn-dribble {
  color: #3b5998;
}

7. 颜色函数

  • rgb($red,$green,$blue) 根据红、绿、蓝三个值创建一个颜色（把rgb值转换为16进制）- rgba($color,$alpha) 根据红、绿、蓝和透明度值创建一个颜色（把16进制转化为rgba）；
  • red($color) 从一个颜色中获取其中红色值；
  • green($color) 从一个颜色中获取其中绿色值；
  • blue($color) 从一个颜色中获取其中蓝色值；
  • mix($color-1,$color-2,[$weight]) 把两种颜色混合在一起。

HSL函数

  • hsl($hue,$saturation,$lightness) 通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；
  • hsla($hue,$saturation,$lightness,$alpha) 通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色；
  • hue($color) 从一个颜色中获取色相（hue）值；
  • saturation($color) 从一个颜色中获取饱和度（saturation）值；
  • lightness($color) 从一个颜色中获取亮度（lightness）值；
  • adjust-hue($color,$degrees) 通过改变一个颜色的色相值，创建一个新的颜色；
  • lighten($color,$amount) 通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；
  • darken($color,$amount) 通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；
  • saturate($color,$amount) 通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色
  • desaturate($color,$amount) 通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；
  • grayscale($color) 将一个颜色变成灰色，相当于desaturate($color,100%);
  • complement($color) 返回一个补充色，相当于adjust-hue($color,180deg);
  • invert($color) 反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。

Opacity函数

  • alpha($color) / opacity($color) 获取颜色透明度值；
  • rgba($color, $alpha) 改变颜色的透明度值；
  • opacify($color, $amount) / fade-in($color, $amount) 使颜色更不透明；
  • transparentize($color, $amount) / fade-out($color, $amount) 使颜色更加透明。

其他指令

@import

Sass 扩展了 CSS 的 @import 规则，让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外，被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。

Sass 会在当前目录下寻找其他 Sass 文件， 如果是 Rack、Rails 或 Merb 环境中则是 Sass 文件目录。 也可以通过 :load_paths 选项或者在命令行中使用 --load-path 选项来指定额外的搜索目录。

@import 根据文件名引入。 默认情况下，它会寻找 Sass 文件并直接引入， 但是，在少数几种情况下，它会被编译成 CSS 的 @import 规则：

  • 如果文件的扩展名是 .css。
  • 如果文件名以 http:// 开头。
  • 如果文件名是 url()。
  • 如果 @import 包含了任何媒体查询（media queries）。

如果上述情况都没有出现，并且扩展名是 .scss 或 .sass， 该名称的 Sass 或 SCSS 文件就会被引入。 如果没有扩展名， Sass 将试着找出具有 .scss 或 .sass 扩展名的同名文件并将其引入。

@media

Sass 中的 @media 指令和 CSS 的使用规则一样的简单，但它有另外一个功能，可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样，如果在样式中使用 @media 指令，它将冒泡到外面。来看一个简单示例：

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

编译出来：

.sidebar {
    width: 300px;
}
@media screen and (orientation: landscape) {
    .sidebar {
        width: 500px;
    }
}

@extend

继承

@at-root

@at-root 跳出嵌套。当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root。来看一个简单的示例：

.a {
  color: red;
  .b {
    color: orange;
    .c {
      color: yellow;
      @at-root .d {
        color: green;
      }
    }
  }  
}

编译出来的CSS

.a {
  color: red;
}
.a .b {
  color: orange;
}
.a .b .c {
  color: yellow;
}
.d {
  color: green;
}

@debug

@debug 在 Sass 中是用来调试的，当你的在 Sass 的源码中使用了 @debug 指令之后，Sass 代码在编译出错时，在命令终端会输出你设置的提示 Bug:

@debug 10em + 12em;

会输出：

Line 1 DEBUG: 22em

@warn

@warn 和 @debug 功能类似，用来帮助我们更好的调试 Sass。

@error

@error 和 @warn、@debug 功能是如出一辙。

weixin_33743703
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Sass 简介
天空之外
11-12 2017
什么是Sass Sass 是 Syntactically Awesome Stylesheets 的简写，是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。 Sass 是一个将脚本解析成 CSS 的脚本语言（SassScript），也是一款 CSS 预处理器，它减少了 CSS 的重复，也因此节省了时间。Sass 是最早的 CSS 预处理语言，有比 Less 更强大的功能。Sass 扩展了 CSS3，增加了规则、变量、混入选择器、继承等特性。 什
Sass学习之路(1)——Sass简介
YuuyaRin的博客
12-09 1053
Sass是CSS的一种预处理器语言，类似的语言还有Less，Stylus等。 那么什么是CSS预处理器？ CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。 换言之就是说，CSS预处理器是一种专门的变成语言，在通过这种语言编写之后，再将其编译成正常的CS
Sass简介
风轻云淡
01-28 235
我的文章会更新在简书上所以这边就不再写了但是会持续转载哒 https://www.jianshu.com/p/2ee8d26946a3  
第1章 Sass简介
date25000的博客
08-06 263
什么是 CSS 预处理器？ 定义： CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。 通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一...
SASS - 简介
吴吃辣
06-07 212
SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS – @extend（继承）指令 SASS – 操作符 SASS – 函数 SASS – 输出格式 Sass是一种CSS扩展语言，它使CSS更加容易编写维护。Sass 是 Syntacticall...
sass简介_动力节点Java学院整理
09-27
Sass可以简化Css工作流，使Css的扩展和维护工作更容易，这篇文章主要介绍了sass简介的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
SASS简介及使用方法.md
最新发布
06-13
SASS简介及使用方法
sass框架简介
10-12
Sass又名SCSS，是CSS预处理器之一，它能让你更好更...Sass官网是这样描述Sass 的：Sass是一门高于CSS的元语言，能用来清晰的、结构化地描述文件样式，能提供更简洁优雅 的语法，提供多种功能来创建可维护和管理的样式表
sass的简介与快速入门.pptx
09-20
sass简介：开发环境搭建、sass语法、sass继承、函数、变量等 快速入门ppt
SASS的简单介绍
weixin_43727168的博客
10-14 1227
1. SASS概述 1.1 SASS简介 由于CSS的语法不够强大，没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面的形式反复出现，导致难以维护。而动态演示语言为CSS赋予了动态语言的特性，极大的提高了样式语言的可维护性。 SASS是便是一门动态样式语言，是一款款强化CSS的辅助工具，它在CSS语法的基础上，增加了变量，嵌套，混合，导入，函数的高级功能，这些拓展使CSS更加...
sass简介
m0_52634705的博客
06-15 1301
SASS一、了解sass二、sass的变量三、sass的注释四、条件分支语句五、循环语句六、sass的选择器嵌套七、sass 属性的嵌套八、sass的混入九、sass继承十、sass导入 一、了解sass sass官网：https://www.sass.hk/ Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能，扩展名是 .sass。 Scss 是 Sass 3 引入新的语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的C
sass 语法简介
coding...
05-20 2052
基本语法： 变量 sass通过$声明变量，例如： $headline-ff:Arial; $main-sec-ff:Tahoma; h1{ font-family: $headline-ff; } @import 利用sass的@import能力，创建变量文件，并引入宿主文件： 宿主文件screen.scss代码： @import "variables" //前置下划线
sass的基本介绍与常用语法
qq_45799465的博客
02-25 1179
概念 sass是可编译的的css程序，在sass中可以对css程序定义变量，if，for，函数等等。 scss 语法形式和普通的css语法形式完全相同，只是引入了变量，if，for等。实际项目中推荐使用scss格式的文件。 编译 浏览器不支持sass文件的执行，只支持css文件的执行。asss或者scss的we你按都必须变异成css文件，这里推荐使用gulp程序打包压缩的同时，编译sass文件。 配置安装 nodejs默认是从美国的服务器下载安装第三方依赖包，需要修改下载路径是中国服务器。
SASS的介绍和应用示例入门
09-04 1639
1.SASS介绍 SASS是基于Ruby的 CSS预处理器。less是基于JavaScript的CSS预处理器。 对于大文件的编译，SASS是略胜less。 2.应用示例 入门小网站：www.w3cplus.com/sassguide/ 建立如下工程目录： |test   |-index.scs (1)变量 index.scss的代码如下： $fontStack
sass的简单介绍
HelloImyHe的博客
07-17 3445
前言 sass是css的预处理器，它提供了许多便利的写法方法 可以使用变量，常量，嵌套，函数，混合，继承等功能，让css的开发变得更加简单可维护。 直接写出来的sass文件其实就是普通的文本文件，以.sass或.scss作为文件后缀名。 里面可以直接使用css语法以及sass特有的语法特性，完成后通常需要经过编译成合法的css文件以供浏览器使用。 sass的安装 sass基于Ruby语...
SASS简介及使用方法
日常笔记/总结/系列知识梳理
01-23 1533
Sass（Syntactically Awesome Style Sheets）是一种CSS预处理器，用于增强CSS的功能和灵活性。它扩展了CSS，并引入了许多有用的功能，如变量、嵌套、混合、继承以及模块化的结构。变量：Sass允许使用变量来存储和重用CSS属性。可以定义一个变量，然后在整个样式表中使用该变量。这样，如果需要更改某个属性的值，只需修改变量的值即可。嵌套规则：Sass允许将选择器嵌套在其他选择器中，使样式表更具可读性。这样，可以使用父选择器的上下文来定义子选择器的样式。
SASS简单介绍
sz_js的博客
03-30 166
SASS css编写时权重难以控制，嵌套层级多导致代码编写不方便。sass的出现就是为了解决css的缺点。 sass是世界上最好的css扩展语言。在正常的编写css的基础上，增加了很多变量，函数，循环，判断等类似编程语言的代码模式。极大的提高了编写样式的效率。还有许多的内置函数（如颜色加深，颜色淡化）用于高效的属性设置。使得css也可以用类似脚本的方式进行编写。 简单的说： sass就为了解决cs...
webstorm sass
08-13
它提供了对多种前端技术和工具的支持，包括 Sass。 Sass（Syntactically Awesome Style Sheets）是一种 CSS 预处理器，它扩展了 CSS 的功能并提供了更高级的样式表语言。Sass 允许使用变量、嵌套规则、混合（mixins...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值