丸子学SASS(学习1小时 - 基本扩展)

2023-12-17  本文已影响0人  丸子小姐__不懂爱

前言

sass一个css后置处理器,减少了开发人员的输入,极大地提升了开发效率,所以有必要花点时间学习下, 上手很快,先来学习下基本的扩展内容

嵌套规则

内层的样式将它外层的选择器作为父选择器,看例子

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

父选择器 &

当需要直接使用嵌套外层的父选择器时,可使用 & 进行连接

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

属性嵌套

有些 CSS 属性遵循相同的命名空间 (namespace),比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。 看例子

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

变量$

变量支持块级作用域, 嵌套规则内定义的变量只能在规则内使用(局部变量) , 若要转换为全局变量需添加 !global声明

$width: 20px;  // 全局变量

#main {
  $height: 50px !global;  // 局部变量
  width: $width
}
#sidebar {
  height: $height;
}

插值语句 #{}

通过 #{} 插值语句可以在选择器或属性名中使用变量

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

变量定义 !default

在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值,此时,如果变量已经被赋值,不会再被重新赋值,但是如果变量还没有被赋值,则会被赋予新的值

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

#main {
  content: $content;
  new-content: $new_content;
}

@import

导入其他的scc文件,Sass 将会试着寻找文件名相同,拓展名为 .scss 或 .sass 的文件并将其导入

// 单个文件导入
@import "foo.css";
// 多个文件导入
@import "rounded-corners", "text-shadow";

导入嵌套@import,可以将@import 嵌套进css或@media中,这样导入的样式只会出现在嵌套的层中

@extend

将一个选择器下的所有样式继承给另一个选择器

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

当需要定义一套样式并不是给某个元素,而只是通过@extend指令使用时,需要使用到@extend-Only选择器

#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
.notice {
  @extend %extreme;
}

@at-root

@at-root指令导致一条或多条规则在文档的根位置发出,而不是嵌套在它们的父选择器下面

.parent {
  ...
  @at-root {
    .child1 { ... }
    .child2 { ... }
  }
  .step-child { ... }
}
上一篇 下一篇

猜你喜欢

热点阅读