美文网首页
scss基础运用

scss基础运用

作者: a5033edd03f9 | 来源:发表于2017-12-13 23:38 被阅读0次

今天学了什么

变量

     $bg:pink;
.header{background:$bg};
$place:top;
如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。
.header{
  margin-#{$place}:20px;
}

计算功能

       body {
    margin: (14px/2);
    top: 50px + 100px;
    right: $var * 10%;
  }

嵌套

      div h{
  color:red;
}
可以改写为
 div {
    hi{
      color:red;
    }
  }

继承

     SASS允许一个选择器,继承另一个选择器。比如,现有class1:
.class1 {
    border: 1px solid #ddd;
  }

.class2 {
    @extend .class1;
    font-size:120%;
  }

Mixin

       可以重用的代码块
 @mixin left {
    float: left;
    margin-left: 10px;
  }

div {
    @include left;
  }

相关文章

  • scss基础运用

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

  • Scss 初识 @extend 与 @mixin

    前言 前面我们已经学习了 Scss 的基础。其实,能够运用之前的技巧已经足够了,在日常开发中,对 CSS 的熟练使...

  • scss基础

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

  • scss基础

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

  • Sass学习笔记1 - 基础篇

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

  • 关于sass/scss的引用和使用

    在最近的项目中,配合vue,为了让css语言更加易懂好写,我使用了scss,包括在上一篇文章中提到了运用scss来...

  • SCSS(Sass)入门

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

  • 基础---SCSS/SASS

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

  • SCSS 基础语法

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

  • scss/sass基础

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

网友评论

      本文标题:scss基础运用

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