scss基本使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了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体积也会变大

2. 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文章来源地址https://www.toymoban.com/news/detail-772131.html

//_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>

到了这里，关于scss基本使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！