Sass/Scss笔记

最新推荐文章于 2024-09-21 01:50:58 发布

PerfumerKarma

最新推荐文章于 2024-09-21 01:50:58 发布

阅读量232

点赞数

文章标签： css less

本文链接：https://blog.csdn.net/PerfumerKarma/article/details/105230077

版权

文档参考 https://www.sass.hk/

安装

yard add --dev node-sass       //npm i node-sass -D

yard add --dev sass-loader     //npm i sass-loader -D

webpack配置

变量

同名变量

$link-color和$link_color 是同一个变量，定义其中一个可以用另一个名字访问

全局变量

$basic-border: 1px solid black;

局部变量

nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

默认变量

注:使用在组件sass/scss中，当被其他sass/scss文件@import时这个变量默认值为 400px,如果此时又写了一个同名变量,则变量值被后者覆盖，可以认为是 !important 这个css属性的对立

$fancybox-width: 400px !default;
.fancybox {
  width: $fancybox-width;
}

覆盖变量

$link-color: blue;
$link-color: red;
a {
  color: $link-color; /* red */
}

使用方法

// (1)作为属性的一部分
.selected {
  border: 1px solid $highlight-color;
}
// (2)作为整个属性值
.selected {
  border: $highlight-border;
}

注释

//单行注释

/* 特殊行注释 */

/**
 * 文档注释
 */

嵌套

层级嵌套关系

父选择器

组合嵌套关系

选择器嵌套关系

article {
    ~article{
        border-top:1px dashed #ccc;
    }
    > section { background:#eee; }
    dl > {
        dt { color:#333; }
        dd { color:#555; }
    }
    nav + & { margin-top: 0; }
}

//编译后
article ~ article{
    border-top:1px dashed #ccc;
}
article > footer{
    background:#eee;
}
article dl > dt {
    color:#333;
}
article dl > dd {
    color:#555;
}
nav + article{
    margin-top: 0;
}

属性嵌套关系

nav{
    border:{
        style:solid;
        width:1px;
        color:#ccc;
    }
}

//编译后
nav{
    border-style:solid;
    border-width:1px;
    border-color:#ccc;
}

nav{
    border:1px solid #ccc {
        left:0;
        right:0;
    }
}

//上面比下面写更加优雅
nav{
    border:1px solid #ccc;
    border-left:0;
    border-right:0;
}