scss基本使用

scss定义变量

$符号标识来定义变量

变量名用中划线和下划线分隔其实是表示一个意思

$color_base和$color-base其实指向的是同一个变量。

父选择器的标识符&

div{
    color:red;
    &:hover{
        color:bule;
    }
}

群组选择器的嵌套

//css使用
.aaa h1, .aaa h2, .aaa h3{
    font-size:30px
}

// sass嵌套使用

.aaa{
    h1,h2,h3{
      font-size:30px;
    }
}

.bbb, .ccc{
    h2{
        font-size:16px;
    }
}

子组合选择器和同层组合选择器：>、+ 和 ~

// 子组件选择器
// 选择 .aaa 的子元素中的 p 标签
.aaa > p{
    font-size:20px;
}

// 选择 .aaa下所有的 p 标签
.aaa p{
    font-weight:bold;
}

// 同层组合选择器
// 只选择同层 *相邻* *紧跟着* 中间不能有其他的p标签
.bbb+p{
    color:red;
}

// 选择同层全体的 p 标签  不管隔了多少其他的元素
.bbb~p{
    color:yellow;
}

// scss案例
acticle{
    ~acticle{
        border:1px solid red;
    }
    > section{
        background-color:red;
    }
    dl > {
        dt{
            color:#ccc
        }
    }
    nav + & { // 等价于nav+acticle
        margin-top:0;
    }
}

嵌套属性

nav{
    border-style:solid;
    border-width:4px;
    border-color:#ccc;
}

border:{
    style:solid;
    width:4px;
    color:#ccc;
}

// border冒号后面要加空格，不然会报错，说border：后的css无效

导入SASS文件

css和sass区别

1. css导入的css文件是在执行到@important的时候，浏览器才会去下载其他的css文件，这导致页面加载速度比较慢

sass导入样式是在生成css文件时候就把相关的文件导入进来，这样就相关与把所有的样式文件整个到一个css中，无法额外的加载，对应的css体积也会变大

1. css 导入需要加上后缀名，而sass不需要

使用SASS部分文件

在一个实际项目中会可能会创建很多 Sass 文件，但是一般不会每个 Sass 文件都有一个对应的 CSS 文件，而是将少数几个 Sass 文件生成 CSS 文件，其他的 Sass 文件则通过 @import 导入到这些 Sass 文件中。一般不需要生成独立 CSS 文件的 Sass文件称为局部文件，Sass 中有特殊的约定来命名这些文件。

Sass 局部文件的文件名以下划线开头，这样 Sass 就不会在编译时单独编译这个文件输出 CSS，而只把这个文件用作导入。当导入局部文件时，可以省略文件名开头的下划线。

默认变量值

　假如你写了一个可被他人通过

@import

导入的

sass

库文件，你可能希望导入者可以定制修改

sass

库文件中的某些值。使用

sass

的

!default

标签可以实现这个目的。

它很像

css

属性中

!important

标签的对立面，不同的是

!default

用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

$font-size:20px !default;
$font-size:24px;
.aaa{
    font-size :$font-size;
}

嵌套导入

@import 导入sass文件时候，可以在css中间导入

这种导入方式下，生成对应的

css

文件时，局部文件会被直接插入到

css

规则内导入它的地方

//_side.scss
aside{
    color:red
}

.blue-theme{
    @import 'side'
}

//等价于
.blue-theme{
    aside{
        color:red
    }
}

静默注释

注释分2种，1种是能够编译到css中 一种是不能编译到css中

body{
    color:#333;// 这种注释不会出现在生成的css文件中
    padding:0; /*这种注释会出现在生成的css文件中*/
}

混合器

混合器的使用，在我们实际开发时候，经常会遇到不同页面具有相同的样式，而这些相同的样式之中还有细微差别，这时候，scss中的混合器就可以实现大段样式的重用，混合器用@mixin标识符来定义，通过@include来引用

@mixin red-button{
    background-color:red;
    color:#fff
}

.pink-red-button{
    @include red-button;
    background-color:pink;
}

给混合器传参

混合器在抽取公共样式时候，可以通过像函数传参的方式一样，来指定某个特定的样式

@mixin elliplis($width){
    width:$width;
    overflow:hidden;
    text-overflow:elliplis;
    white-space:nowrap;
}

input{
    @include elliplis(100px)
}

当你@include混合器时，有时候可能会很难区分每个参数是什么意思，参数之间是一个什么样的顺序。为了解决这个问题，

sass

允许通过语法

$name: value

的形式指定每个参数的值。

a{
    @include aaa(
        $normal:blue;
        $hover:red;
    )
}

默认参数值

我们也可以给我们传入的参数给一个默认值，就跟函数中参数默认值一致

@mixin aa($normal,$hover:$normal){
    color:$normal;
    &:hover{
        color:$hover
    }
}

选择器继承

使用

sass

的时候，最后一个减少重复的主要特性就是选择器继承。选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过

@extend

语法实现，如下代码

.aaaa{
    @extand .aaa;
    font-size:20px;
}

** SCSS遍历**

1.for循环：语法

方式1：@for $i from 开始值 through 结束值 包含结束值
方式2：@for $i from 开始值 to 结束值 不包含结束值

@for $i from 1 through 3{
  .padding-left#{2 * $i + 8}{
    padding-left: 2 * $i + 8 + px;
  }
}

@for $i from 1 to 3{
  .margin-left#{2 * $i + 8}{
    margin-left: 2 * $i + 8 + px;
  }
}

2.each循环数组：语法

@each item in xxx

$index: index($pixelArr, $item); /**可得到循环的索引*/

$pixelArr: 5, 15;
$position: top, right, bottom, left;
@each $item in $pixelArr {
  $index: index($pixelArr, $item); /**可得到循环的索引*/
  .margin-#{$item} {
    margin: $item + px;
    border-width: $index + px;
  }
  @each $p in $position{
    .margin-#{$p}-#{$item}{
      margin-#{$p}: $item + px;
    }
  }
}

/**最终编译结果*/
.margin-5 {
  margin: 5px;
  border-width: 1px; }

.margin-top-5 {
  margin-top: 5px; }

.margin-right-5 {
  margin-right: 5px; }

.margin-bottom-5 {
  margin-bottom: 5px; }

.margin-left-5 {
  margin-left: 5px; }

.margin-15 {
  margin: 15px;
  border-width: 2px; }

.margin-top-15 {
  margin-top: 15px; }

.margin-right-15 {
  margin-right: 15px; }

.margin-bottom-15 {
  margin-bottom: 15px; }

.margin-left-15 {
  margin-left: 15px; }

scss中的function

scss中的函数和js中的函数差不多 都是用@function来定义函数 @return 来返回函数值

Sass函数：Sass Maps的函数-map-get($map,$key)

map-get($map,$key) 函数的作用是根据 $key 参数，返回 $key 在 $map 中对应的 value 值。如果 $key 不存在 $map中，将返回 null 值。此函数包括两个参数：

• $map：定义好的 map。
• $key：需要遍历的 key。

案例 切换主题的demo

//_theme.scss文件

$themes: (Red: ( //整体主色调/菜单栏背景/图标.按钮主色/悬停状态
    mainColor: #D6000F, //主题色
    titleColor: #5f95cc, //默认字体色/二级信息字体色
    ),
  Blue: ( //整体主色调/菜单栏背景/图标.按钮主色/悬停状态
    mainColor: #409EFF, //菜单选中背景色/点击状态/文字,按钮按下
    titleColor: #d64e18, //列表背景色
    ),
);

// scss处理文件
@import "./themes.scss";
//切换主题时 获取不同的主题色值
@mixin themeify {
    @each $theme-name,
    $theme-map in $themes {
        //!global 把局部变量强升为全局变量
        $theme-map: $theme-map !global;
        //判断html的data-theme的属性值  #{}是sass的插值表达式
        //& sass嵌套里的父容器标识   @content是混合器插槽，像vue的slot
        [data-theme="#{$theme-name}"] & {
            @content;
        }
    }
}

//从主题色map中取出对应颜色
@function themed($key) {
    @return map-get($theme-map, $key);
}

//获取字体颜色
@mixin font_color($color) {
  @include themeify {
      color: themed($color)!important;
  }
}

<template>
    <div>
      <span class="common-util" @click="theme('Red')">1111test</span>
    </div>
</template>
<script>
export default {
  methods:{
    theme(type) {
      window.document.documentElement.setAttribute('data-theme', type)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/handle.scss';
.common-util {
  font-size: 18px;
  height: 100px;
  margin-top: 20px;
  @include font_color('titleColor');
}
</style>