首页 > 其他分享 >[CSS]SCSS基本用法

[CSS]SCSS基本用法

时间:2024-01-24 10:57:06浏览次数:26  
标签:SCSS 调用 变量 编译 用法 嵌套 混合 选择器 CSS

1. 声明变量的符号 $
2. 默认变量 !default 默认变量在值后面加上 !default
3. 变量调用
4. 局部变量和全局变量
5. 嵌套
  选择器嵌套、属性嵌套、伪类嵌套
6. 混合宏 @mixin声明混合宏, @include调用混合宏
  (理解:写了个方法)
  不足:编译的时候会根据不同选择器分别编译,形成冗余代码块
7. 扩展/继承 @extend
8. 占位符 % 需要通过@extend调用才会编译
  编译出来的代码会将相同的代码合并在一起,解决混合宏的不足

参考:https://blog.csdn.net/qq_42667613/article/details/113176294

标签:SCSS,调用,变量,编译,用法,嵌套,混合,选择器,CSS
From: https://www.cnblogs.com/ximu1009/p/17984127

相关文章

  • 【转载】L2Dwidget.js网页二次元看板娘的用法
    最近新建了博客,https://yellowgg.cn,许久不更新的博客园想引个流,可以关注一波嗷。发现某些blog网站左下方或者右下方出现的二次元卡通人物或萌萌阿猫,除了萌,还可以监听鼠标的行为,产生互动的现象。1.关于脚本的生成L2Dwidget.min.js的源码:https://github.com/xiazeyu/live2d-wid......
  • postman 接口测试工具常见用法
    postman不适合做压力测试工具postman接口测试工具,并不适合做压力测试,实际上即便把循环间隔设置为0,postman的请求频率依旧不高,postman是等待接口响应完成以后再发送下一个请求,所以postman是测不到并发问题的,jmeter可以做到异步请求,请求发的飞快,有并发测试要求或者需要比较强的压......
  • WHEN NOT MATCHED THEN语句在oracle中的用法
    WHENNOTMATCHEDTHEN这是一个在某些数据库系统(如Oracle)中使用的特殊子句,用于处理左连接中的"未匹配"情况。当左连接的条件不满足时,这部分的代码会执行。在这种情况下,如果O.DCSHYBH的值在L中没有匹配项,那么将插入一个NULL值或默认值。总的来说,这段代码执行了一个左连接操作,并根......
  • 无涯教程-CSS - 文字效果
    您可以使用CSS过滤器将特殊效果添加到文本,图像和网页的其他方面,而无需使用图像或其他图形。AlphaChannelAlpha通道滤镜会更改对象的透明度,从而使其融合到背景中,以下参数可以在此过滤器中使用-Sr.No.Parameter&Remark1opacity透明度。0是完全透明的,100是完全不透明的......
  • 无涯教程-CSS - @规则
    本章将涵盖以下重要的@规则-@import    : 将另一个样式导入到当前样式表中。@charset   : 样式使用的字符集。@font-face  : 用于详尽地描述文档中使用的字体。!important  : 指示用户定义的规则应优先。注意-还有其他@规则,无涯教程将在......
  • css定义方式
     在Vue.js中,可以使用所有三种CSS样式定义方式(内联样式、内部样式表和外部样式表),但通常会采用一种或多种特定的方式来适应Vue的组件架构内联样式(InlineStyles):在Vue中,内联样式通常用于动态绑定样式属性。可以使用v-bind:style(或简写为:style)来实现。<template......
  • 无涯教程-CSS - 伪元素
    CSS伪元素用于向某些选项添加特殊效果,伪元素的简单语法如下-selector:pseudo-element{property:value}CSS类也可以与伪元素一起使用-selector.class:pseudo-element{property:value}最常用的伪元素如下-Sr.No.Value&Remark1:first-linep:first-line  选择每......
  • 无涯教程-CSS - 伪类
    CSS伪类是用来添加一些选择器的特殊效果。伪类的简单语法如下-selector:pseudo-class{property:value}CSS类也可以与伪类一起使用-selector.class:pseudo-class{property:value}最常用的伪类如下-Sr.No.Value&Remark1:linka:link 选择所有未访问链接2:visi......
  • set用法详解
    ES6中的Set是一种新的数据结构,类似于数组,用于存储有序的数据。Set没有随机访问的能力,不能通过索引来获取具体的某个元素Set中的元素具有唯一性,不允许存储相同的元素。Set本身是一个构造函数,可以用来实例化Set对象。通过add()方法可以向Set中添加元素,如果添加的元......
  • 前端歌谣-第陆拾陆课-html+css+js实现计算器效果
    前言我是歌谣微信公众号关注前端小歌谣一起学习前端知识今天继续给大家讲解计算器的讲解index.css/*Basicreset*/*{ margin:0; padding:0; box-sizing:border-box; /*Bettertextstyling*/ font:bold14pxArial,sans-serif;}/*FinallyaddingsomeIE9......