scss 常用教程

最新推荐文章于 2024-08-01 10:16:39 发布

肖ZE

最新推荐文章于 2024-08-01 10:16:39 发布

阅读量1.9k

点赞数 1

分类专栏： html 和 css

本文链接：https://blog.csdn.net/lucky541788/article/details/88218197

版权

本文是关于SCSS的教程，它介绍了如何在vue-cli3中配置全局SCSS变量，以及SCSS的常用特性如变量、映射、嵌套、引入、混合、继承、操作符、CSS扩展和嵌套属性。SASS提供变量存储复用信息，地图对象，嵌套选择器增强可读性，引入片段简化管理，混合实现代码复用，继承减少冗余，操作符进行简单计算，CSS扩展及嵌套属性提升效率。

摘要由CSDN通过智能技术生成

vue-cli3 配置全局 scss 变量

vue add style-resources-loader

之后按需选择 scss

// vue.config.js
const path = require('path')
module.exports = {
   
  publicPath: './',

  pluginOptions: {
   
    'style-resources-loader': {
   
      preProcessor: 'scss',
      patterns: [
        path.resolve(__dirname, './src/common.scss')
      ]
    }
  }
}

scss 常用教程

Sass是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。
特性概览
CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过SASS预处理器进行CSS的开发，SASS提供的变量、嵌套、混合、继承等特性，让CSS的书写更加有趣与程式化。

变量

变量用来存储需要在CSS中复用的信息，例如颜色和字体。SASS通过$符号去声明一个变量。

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
   
  font: 100% $font-stack;
  color: $primary-color;
}

上面例子中变量 $f o n t - s t a c k 和$ primary-color的值将会替换所有引用他们的位置。

body {
   
  font: 100% Helvetica, sans-serif;
  color: #333;
   }

map

Sass Map(映射)对象是以一对或多对的 key/value 来表示。
Sass Map 是不可变的，因此在处理 Map 对象时，返回的是一个新的 Map 对象，而不是在原有的 Map 对象上进行修改。
下表列出了 Sass 的 Map 函数：

函数	描述 & 实例
map-get(map, key)	返回 Map 中 key 所对应的 value(值)。如没有对应的 key，则返回 null 值。实例: $font-sizes: ("small": 12px, "normal": 18px, "large": 24px) map-get($font-sizes, "small") 结果: 12px
map-has-key(map, key)	判断 map 是否有对应的 key，存在返回 true，否则返回 false。实例: $font-sizes: ("small": 12px, "normal": 18px, "large": 24px) map-has-key($font-sizes, "big") 结果: false
map-keys(map)	返回 map 中所有的 key 组成的队列。实例: $font-sizes: ("small": 12px, "normal": 18px, "large": 24px) map-keys($font-sizes) 结果: "small", "normal, "large"
map-merge(map1, map2)	合并两个 map 形成一个新的 map 类型，即将 map2 添加到 map1的尾部实例: $font-sizes: ("small": 12px, "normal": 18px, "large": 24px) $font-sizes2: ("x-large": 30px, "xx-large": 36px) map-merge($font-sizes, $font-s