SCSS 的基本使用

作者:神秘网友 发布时间:2021-02-23 13:56:06

SCSS 的基本使用

现在最常用的 CSS 处理器有 Less,Sass。本人比较常用Sass,选择什么看自己,主要数为了提高开发效率。今天就将一些基本用法在这里分享给大家,有不足的希望在评论区里补充哦~

首先,用一句话说明 Sass、Scss的关系:Sass就是css的预处理器,Scss是Sass3版本中引入的新语法特性。

然后,我们来看怎么使用呢像日常一样,需要安装npm 包再使用哦:cnpm i -S node-sass sass-loader,当然这里你是用npm 、yarn 安装都是可以的!

我们一般在组件中这样使用,在 style 标签上加 lang="scss" 这样就style 里需要支持 scss 语法。

style lang="scss" scoped
  ...        
/style

好啦,到这里我们就可以开始使用 scss 的魔法啦~

  • 嵌套
    • 选择器嵌套例如pspan{color:#fff;}
      p{
             span {
                 color:#fff;
             }
       }
    • 属性嵌套例如:p{font-size:16px}
       p{
              font: {
                  size: 16px;
              }
          }
    • :在嵌套的代码块内,使用引用父元素例如:a:hover{color:#ddd}
      a{
              :hover{
                  color: #ddd;
              }   
          }
  • 变量 :SASS允许使用变量,所有变量以$开头
    $global-bg:#7a7a7a;
        a{
            :hover{
                color: $global-bg;
            }   
        }

    如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。

    $side : left;
    
    .rounded {
       border-#{$side}-radius: 5px;
    }
  • 继承:SASS允许一个选择器,继承另一个选择器,class2要继承class1,就要使用@extend命令:
    .class1 {
        border: 1px solid #ddd;
      }
    .class2 {
        @extend .class1;
        font-size:120%;
      }
  • 混入 @mixin @include
    • 使用@mixin命令,定义一个代码块。
      @mixin left($value: 10px) {
          float: left;
          margin-right: $value;
        }
    • 使用@include命令,调用这个mixin。

      div {
          @include left(20px);
        }
  • 引入 @import 、Partials
    • @import命令,用来插入外部文件。
      @import "path/filename.scss";
    • 如果插入的是.css文件,则等同于css的import命令。
      @import "foo.css";
    • 文件名前添加下划线,这样会告诉 Sass 不要编译这些文件。例如,将文件命名为_color.scss,便不会编译成_color.css文件。但导入语句中却不需要添加下划线(注意,不可以同时存在添加下划线与未添加下划线的同名文件,否则添加下划线的文件将会被忽略。)
  • +、-、*、/、%:SASS允许在代码中使用算式
    body {
        margin: (14px/2);
        top: 50px + 100px;
        right: $var * 10%;
      }
  • ! default !global
    • !default 变量的默认值,如果未被重新赋值
    • !global 将变量提升为全局变量
  • 条件语句 @if @if else @else
    p {
        @if 1 + 1 == 2 { border: 1px solid; }
        @if 5  3 { border: 2px dotted; }
      }
    
        @if lightness($color)  30% {
        background-color: #000;
      } @else {
        background-color: #fff;
      }
  • 循环语句 @for @while @each
    @for $i from 1 to 10 {
      .border-#{$i} {
        border: #{$i}px solid blue;
      }
    }
    
    $i: 6;
    @while $i  0 {
      .item-#{$i} { width: 2em * $i; }
      $i: $i - 2;
    }
    
    @each $member in a, b, c, d {
      .#{$member} {
        background-image: url("/image/#{$member}.jpg");
      }
    }

    @for 的使用方法:

    • @for $i from start through end (包括end 这个数)
    • @for $i from start to end (不包括end 这个数)
    1. $i 表示变量
    2. start 表示起始值
    3. end 表示结束值

  • 自定义函数 @function
    @function double($n) {
      @return $n * 2;
    }
    
    #sidebar {
      width: double(5px);
    }
  • 颜色函数 :SASS提供了一些内置的颜色函数,以便生成系列颜色。
    lighten(#cc3, 10%) // #d6d65c
    darken(#cc3, 10%) // #a3a329
    grayscale(#cc3) // #808080
    complement(#cc3) // #33c

  

SCSS 的基本使用 相关文章

  1. Oracle扩容表空间

    1、现使用表空间查询 SELECT TABLESPACE_NAME "表空间", To_char(Round(BYTES / 1024, 2), '99990.00') || '' "实有", To_char(Round(FREE / 1024, 2), '99990.00') || 'G' "现有", To_char(Round(( BYTES - FREE ) / 1024, 2), '99990.00') || 'G' "使用",

  2. 使用scrapy框架,做抓取某短视频里面发布的视频的观看次数、点赞等信息的工程!

    本文仅供学习与交流,切勿用于非法用途!!! 第一部分 分析: 第二部分 实现该工程代码: 这里使用: scrapy startproject ProName cd ProName scrapy ganspider spiderName www.xxx.com 创建scrapy工程和爬虫文件. 创建好scrapy工程后,在配置文件settings.

  3. java.util包下 Calendar, Timer, TimerTask的简单使用

    Carlendar类实例,set方法非常灵活,可以方便地设定一个时间。 Calendar calendar = Calendar.getInstance(); //分别是 年 月日 时分秒 ,月份是从0月开始,12月就是11 calendar.set(2020,0,1,18,24,05); Date time = calendar.getTime(); System.out.printl

  4. 分析一下函数指针的使用

    线程池代码中存在一段结构体初始化的设计: /* all tasks in the linked list recalled function for task*/typedef struct worker{ void *(*process) (void *arg); /*recalled function*/ void *arg; struct worker *next;} CThread_worker; 看最基本的定义

  5. LINQ教程一:LINQ简介

    一、为什么要使用LINQ 要理解为什么使用LINQ,先来看下面一个例子。假设有一个整数类型的数组,找到里面的偶数并进行降序排序。 在C#2.0以前,如果要实现这样的功能,我们必须使用'foreach'或'for'循环来遍历数组,先找到偶数然后在降序排序,相关代码如下:

  6. Tesseract-OCR使用有感

    这玩意儿就只有一个Tesseract.dll 就算有其它的加上x64目录下的另外两个dllleptonica-1.80.0.dlltesseract41.dll也不过几兆而已,但是 但是 但是 加上字库文件可就大了 几十兆 。也充分说明了这玩意儿跟我原先说的一样的主要在于字库的匹配。如果只识别数字

  7. 一、在 HTML 中使用 JavaScript

    一、script 标签的使用方式 直接在标签中写入代码 script function sayHi() { console.log("Hi"); } function sayScript() { console.log("\/script"); // 特殊字符需要转义,"\" } sayHi(); sayScript();/script 引入外部 js 文件 script src="./js/sayHell

  8. 云原生项目实践DevOps(GitOps)+K8S+BPF+SRE,从0到1使用Golang开发生产级麻将游戏服务器—第6篇

    图解 Manager 游戏逻辑组件 系列文章 Golang开发生产级麻将游戏服务器—第1篇 Golang开发生产级麻将游戏服务器—第2篇 Golang开发生产级麻将游戏服务器—第3篇 Golang开发生产级麻将游戏服务器—第4篇 Golang开发生产级麻将游戏服务器—第5篇 介绍 这将是一

  9. 了解 Vue 中混入 mixin 的使用

    子曰:万里之行,始于足下。 环境 OS: windows 10 应用:Vuejs + Android 壳的 hybrid app 应用 IDE: Visual Studio Code 问题 在最近的 hybrid app 项目中,有一个需求是需要使用 aliyun 的 oss 进行对 pdf、txt、word、xlsx 的预览,而图片、视频则需要在

  10. 【大家的项目】Maya 中使用 Rust

    Maya PolyNoise 用 Rust 在 Maya 中实现 PolyNoise 的小案例 性能对比 Python: 0.6s Rust: 0.04s C++: 0.04s 需要 Rust = 1.49 (nightly) Maya = 2016 pip 安装 首先克隆代码,并 cd 到代码目录 mayapy -m pip install -r requirements.txt mayapy setup.py i

每天更新java,php,javaScript,go,python,nodejs,vue,android,mysql等相关技术教程,教程由网友分享而来,欢迎大家分享IT技术教程到本站,帮助自己同时也帮助他人!

Copyright 2020, All Rights Reserved. Powered by 跳墙网(www.tqwba.com)|网站地图|关键词