【SASS/SCSS(一)】选择器

Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式。

而SCSS是SASS引入的语法,是CSS的超集,所以所有CSS有效的使用在SCSS中都生效

一、回顾CSS选择器

  • 通用选择器 *
  • 元素选择器
  • 类选择器,.className
  • ID选择器,#id
  • 属性选择器,对元素中某个属性的值进行筛选,语法有:[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
  • 逗号分隔的选择器列表
  • 空格代表的后代选择器
  • > 代表的直接后代选择器
  • ~ 代表所有后面的兄弟节点选择器
    • 代表后面直接跟着的第一个兄弟节点选择器
  • || 列组合器,例如 col || td代表<col>该列域下的所有td结点
  • 伪类/伪元素选择器

具体参见MDN文档:

CSS 选择器 - CSS:层叠样式表 | MDN (mozilla.org)

二、SCSS利用嵌套语法实现选择器

SCSS为了优化CSS的语法表达,使其更简洁、避免重复定义样式,因此实现了嵌套语法来对元素进行选择。例如:

css 复制代码
//对ul中的直接后代进行筛选,定制了直接后代中li的样式
ul > {
  li {
    list-style-type: none;
  }
}


//h2选择紧邻兄弟p元素
h2 {
  + p {
    border-top: 1px solid gray;
  }
}

//p元素的所有一般兄弟元素中,选择出span / h1定制样式
p {
  ~ {
    span {
      opacity: 0.8;
    },
    h1 {
      color: red;
    }
  }
}

由于嵌套语法,父选择器的很多属性可以不被反复定义,同时使得选择器的实现更直观、更灵活

三、父选择器

Sass中利用 & 来指示父选择器,这样在嵌套语法中,可以更方便地复用父选择器

同时,还可以在父选择器的基础上添加后缀,更便捷地寻找基于父选择器的命名【但并非父子关系】

添加后缀时,父选择器必须是字母/数字结尾的(例如以 ID 、className、元素标签定义的父类),才可以添加后缀

css 复制代码
.alert {

  max-width: 600px;
  margin: 4rem auto;
  width: 90%;
  font-family: "Raleway", sans-serif;
  background: #f4f4f4;

  //定义该元素伪类的CSS
  &:hover {
    font-weight: bold;
  }

  //添加后缀
  &__copy {
    display: none;
    padding: 1rem 1.5rem 2rem 1.5rem;
    color: gray;
    line-height: 1.6;
    font-size: 14px;
    font-weight: 500;

  &--open {
      display: block;
    }
  }
 

}

嵌套语法需要区分的部分!构成父子关系的选择器 以及 只是复用名称的选择器!

css 复制代码
//SASS
.btn {
    color: red;
    //后代选择器
    a{
        color:white;
    }
    //复用的时候要自己再构造一遍需要的后代选择器
    & &-item{
        color:purple;
    }

    //平级,只是名称做了复用
    &-item {
        color: black;

        &-green {
            color: green
        }
    }
}


//等价CSS
.btn {
  color: red;
}

.btn a {
  color: white;
}

.btn .btn-item {
  color: purple;
}

.btn-item {
  color: black;
}

.btn-item-green {
  color: green;
}

如果基于选择器列表,& 获取父选择器代表什么呢?

&可以理解为所有父级选择器结构的引用,举几个例子,看看SASS该写法下css的等价内容:

1、

css 复制代码
//scss
.main aside:hover,
.sidebar p {
  parent-selector: &;
  // => ((unquote(".main") unquote("aside:hover")),
  //     (unquote(".sidebar") unquote("p")))
}

//等价css
.main aside:hover,
.sidebar p {
  parent-selector: .main aside:hover, .sidebar p;
}

2、

css 复制代码
//scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}


//css
ul, ol {
  text-align: left;
}
ul ul, ol ol {
  padding-bottom: 0;
  padding-left: 0;
}

在这个例子中值得注意的是,有相同前缀的css属性例如padding-*、margin-*等,可以在书写时以嵌套语法的形式拆分

3、如果父选择器是类选择器,可以利用其构造新的选择器,并提取到顶层

css 复制代码
//scss
.selector {
  color: blue;
  //利用表达式的写法构造
  @at-root #{a + &} {
    color: red;
  }
}

//等价css
.selector {
  color: blue;
}
a.selector {
  color: red;
}
相关推荐
web行路人6 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂28 分钟前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石36 分钟前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程37 分钟前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫1 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
Justinc.2 小时前
CSS3新增边框属性(五)
前端·css·css3
fruge2 小时前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia2 小时前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫2 小时前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js