sass各种知识点

最新推荐文章于 2024-11-06 10:40:57 发布

原创最新推荐文章于 2024-11-06 10:40:57 发布 · 319 阅读

0 ·

CC 4.0 BY-SA版权

sass 专栏收录该内容

1 篇文章

订阅专栏

sass学习笔记

Css扩展

嵌套规则

与less相同父选择器套子选择器

父选择器 &

与less相同用于选择父元素

属性嵌套

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
} //避免重复书写

占位符选择器%foo

注释/**/ ,//

/**/会被输出 //不输出

$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */  同过这种方法在注释中加变量

SassScript

变量$

用法

$width: 5em;
#main {
  $width: 5em !global; //通过!global声明为去全局变量
  width: $width;
}

#sidebar {
  width: $width;
}

数据类型

SassScript的6种数据类型

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

字符串

通过#{$val}可以将原来的字符串去引号

数组

可以通过sass的方法对数组进行操作

nth可以访问数组中的每一项
append在数组中添加新值
@each可以便利数组中的每一项

数组分组

(1px 2px) (5px 6px)

运算

== ,!=可以对任何数据类型进行运算

数字运算

+,-,*,/,%
<,>,<=,>=关系运算符

函数

调用

p {
  color: hsl(0, 100%, 50%);
}

变量定义!default

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
} //设置变量默认值

@-Rules与指令

@import

导入文件

以下情况不会导入文件

扩展名.css
扩展名http://开头
文件名url()
在@import上有媒体查询

@import “foo.css”;
@import “foo” screen;
@import “http://foo.com/bar“;
@import url(foo);

会导入.sass,.scss的文件

同时导入多个文件

@import "rounded-corners", "text-shadow";

分音

如果需要导入scss,但是不需要编译为css只需要在文件名前面添加下划线 ,但是导入的的时候不需要加下划线

嵌套@import

.example {
  color: red;
}
#main {
  @import "example";
}
//css编译
#main .example {
  color: red;
}`

不能再混合指令和控制指令中嵌套@import

@media

媒体查询可以被嵌套在css中,编译时放到放到最外层

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}
//编译为css
.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

@extend

用于继承属性

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

同样可以继承伪类样式(元素的子类也可以)

.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}
//css编译为
.comment a.user:hover, .comment .user.hoverlink {
  font-weight: bold; }

多重延伸

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

继续延伸

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}
//编译成css
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

选择器列

#fake-links .link {
  @extend a;
}

a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}
//编译成css
#fake-links .link {
  @extend a;
}

a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}

@extend-Only选择器将#或.好被替换成%

不会被编译到css中用法和id，class选择器相同

!optional

可以让在未声明一个选择器的时候编译器不自动生成

@extend不能延伸@media以外的选择器

输出提示

@debug

@warn

@error

判断语句

@if

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}

@if… @else if

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}