美文网首页
scss基础

scss基础

作者: zhenghongmo | 来源:发表于2020-03-12 14:12 被阅读0次

学习环境

  1. 安装parcel
  • 在终端打开要编写scss的文件夹
  • 运行以下命令安装parcel:
npm init -y
npm i -g parcel-bundler
  • 运行npx parcel index.html得到网址,打开网址预览scss,可直接将scss转换为css
  1. 在线学习环境

codepen

语法

  1. 嵌套选择器
ul{
    属性:属性值;
    >li{
        属性:属性值;
    }
}
  1. 变量

例如:

$color:red;
body{
    border: 1px solid $color;
    div{
        background:$color;
    }
}
  1. mixin
@mixin xxx($color){
border: 1px solid $color;
}
body{
    @include xxx(red);
}
  1. placeholder
%box{
    box-shadow:0 0 3px block;
}
body{
    div{
        @extend %box;
    }
}

scss相关

  1. BEM(css命名法)

    Block Element Modifior

  2. &符号

    可以用&代替父元素的class值

UserCard{
    UserCard-name{}
}
取代为:
UserCard{
    &-name{}
}
  1. 嵌套属性
font:{
    size:16px;
    weight:blod;
}
  1. 注释
单行://xxxxxxx
多行:/*xxxx
      xxxx*/
  1. 变量作用域
  • 将变量放到某个选择器的{}中,作用域为这个选择器
  • 作用域覆盖,就近原则
  • &red:#f60 !global强制变为全局变量
  • $red-color$red_color被看作是一个变量
  1. 运算
  • css:calc(200px / 2)
  • scss:直接做加、减、乘、模(100%3 //1)
  • 除要满足其中一个条件:

    .该值存在一个变量,例如$red/3

    .用括号括起来,例如:(100px/3)

    .该值作为另一个表达式的一部分,例如100px/3-0
  1. 颜色相关运算
  • darken(颜色,10%)颜色加深10%.
$red:#ff0000;
color:$red+#888888;
==>color:#ff8888;
  1. 字符串插值
  • #{$red}插入#ff0000字符串。
  1. 循环
$step:25%
$n:10%
@keyframes animationname{
    @for $i from 0 to 4{
        #{$i*$step}{
            @if $i%2==0{
                transforrm:translateX(-$n)
                }else{
                    transform:translateX($n)
                }
        }
    }
}

scss响应式

  1. 动态缩放--单位:vw
  • scss函数:
@function px($npx){
    @return $npx/375*100vw;
}
  • 调用:

width: px(61)//宽度为61px,转换为vw单位。

相关文章

  • scss基础

    在网上找到了写的特别好的教程 sass基础

  • scss基础

    学习环境 安装parcel 在终端打开要编写scss的文件夹 运行以下命令安装parcel: 运行npx parc...

  • Sass学习笔记1 - 基础篇

    CSS预处理器 —— Sass学习笔记(基础) 参考 scss官网 SCSS 里的数组及其遍历 https://b...

  • SCSS(Sass)入门

    SCSS 是什么 SCSS 是 CSS 的扩展, 在保证兼容性的基础上, 允许使用变量、 嵌套、 混合、 导入等特...

  • 基础---SCSS/SASS

    1、什么是CSS预处理器,什么是Sass? (1)用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS...

  • scss基础运用

    今天学了什么 变量 计算功能 嵌套 继承 Mixin

  • SCSS 基础语法

    1. 选择器扩展 1. BEM 命名法(CSS 命名) BEM 全称为 Block Element Modifi...

  • scss/sass基础

    预处理 CSS本身可以很有趣,但样式表变得更大,更复杂,更难维护。这是预处理器可以提供帮助的地方。 Sass允许你...

  • scss基础语法

    一、变量以 $ 开头 二、&、#{}(类似与js的模版字符串的变量写法#{$font-size}) 以下写法会被翻...

  • scss基础用法

    html 嵌套嵌套标签.main { .top { background: red; }...

网友评论

      本文标题:scss基础

      本文链接:https://www.haomeiwen.com/subject/uxvujhtx.html