SCSS学习

最新推荐文章于 2024-04-10 00:11:18 发布

米斯特尔曾

最新推荐文章于 2024-04-10 00:11:18 发布

阅读量826

点赞数 2

分类专栏： css

本文链接：https://blog.csdn.net/qq_30101131/article/details/113941786

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了Sass中的选择器用法，包括父选择器`&`、群组选择器、后代选择器、子元素选择器、相邻兄弟选择器和通用兄弟选择器。此外，还探讨了局部文件、默认变量值、静默注释、混合器和继承的概念。文章提到了OOCSS和OOSCSS的优缺点，并展示了如何使用Sass进行代码优化，包括颜色函数、列表、映射和控制命令。最后，讨论了Sass在项目文件管理和颜色、z-index管理中的应用策略。

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

SCSS学习

父选择器 &

.container {
    color: red;
    &:hover {
        color: #ffffff;
    }
    body .other & {
        color: #000000
    }
}

编译结果

.container {color: red;}
.container:hover { color: #ffffff;}
body .other .container { color: #000000 }

css中, > + ~

群组选择器（’,’）

/* 表示既h1，又h2 */
h1, h2 {
  color: red;
}

后代选择器（空格）

/* 表示 h1 下面的所有 span 元素，不管是否以 h1 为直接父元素 */
h1 span {}

子元素选择器（’>’）

/* 表示 h1 下面的所有以 h1 为直接父元素的 span 元素，注意必须以 h1 为直接父元素 */
h1 > span {}

相邻兄弟选择器（’+’）

选择紧接在另一个元素后的元素，而且二者有相同的父元素。

兄弟选择器（’~’）

选择在某元素之后的所有兄弟元素，不一定要紧跟在后面，但必须得是相同父元素，即必须是同一级元素。

/* A之后的所有B元素，不一定要紧跟在A后面、相同父元素 */
A ~ B{}

使用SASS部分文件

当通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。对此，sass有一个特殊的约定来命名这些文件。

此约定即，sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。举例来说，你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import “themes/night-sky”;。

局部文件可以被多个不同的文件引用。当一些样式需要在多个页面甚至多个项目中使用时，这非常有用。在这种情况下，有时需要在你的样式表中对导入的样式稍作修改，sass有一个功能刚好可以解决这个问题，即默认变量值。

默认变量值

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

当有外部变量引入时就会覆盖默认变量

静默注释

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

减少重复代码（混合器和继承）

@mixin和@include
继承

.error {
  border: 1px solid red;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

在继承中如果被继承的类在css中没有实际意义可以用%来开头这样在编译时就不会生成，只在继承的类中会存在

%nav { color: red}
.header .nav { @extend %nav}

继承和混合优劣

@extend会产生更多的代码但是在http用gzip压缩后却比同样功能的@mixin的体积更小为了性能，选择Mixins吧！

OOCSSvs.OOSCSS

第三方博客对OOCSS和OOSCSS介绍

OOCSS——概念篇
 OOCSS——核心篇
 面向对象的CSS(OOCSS)
CSS架构
 崇拜CSS
CSS分层

OOCSS基本原则

优点

强调重用
选择器简洁
可扩展类
强调风格与内容分离
强调内容与容器分离

缺点

大量使用演示类
需要在模板中应用演示类
样式(CSS)和结构(HTML)藕合太紧
如果设计变动，需要更改CSS和HTML
创建了数千行CSS，但有可能这些CSS永远不会被使用

OOSCSS的基本原则

没有CSS，只有Sass
通过%placholder来声明视觉对象
可以通过mixin创建可重复的CSS
语义化的类名在DOM中声明，而视觉化类名在Sass中声明
否则不可能使用CSS构建UI结构和框架
通过Sass来扩展类，而不是通过DOM来扩展类

scss技术博客中的一些范例

Sass创建的可复用的CSS对象:

%arial-font-family {
    font-family: arial;
}
%larger-font-size {
    font-size: 150%;
}
%text-color {
    color: #313131;
}
%mbm {
    margin-bottom: 10px !important;
}
.billing-info {
    label {
        @extend %arial-font-family;
        @extend %larger-font-size;
        @extend %text-color;
        @extend %mbm;
    }
}

scss对于需要加前缀的属性

SCSS中的keyframes

@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        @content;
    }
    @-moz-keyframes #{$animationName} {
        @content;
    }
    @-o-keyframes #{$animationName} {
        @content;
    }
    @keyframes #{$animationName} {
        @content;
    }
}

你想让你的animation-name有一个随机名称，可以借助Sass中的unique-id()函数功能。

@mixin animation-keyframes {
    $animation-name: unique-id();
    animation-name: $animation-name;

    @keyframes #{$animation-name} {
        @content;
    }
}

scss数据类型

null，Booleans

这个和JavaScript中null，Booleans类似

number

$size: 18;                  // A number
$px-unit: $size * 1px;      // A pixel measurement
$px-string: $size + px;     // A string
$px-number: $px-unit / 1px; // A number

string

$website: 'SitePoint'; // Stores SitePoint
$name: 'Gajendar' + ' Singh'; 
// 'Gajendar Singh'
$date:  'Month/Year : ' + 3/2016;
// 'Month/Year : 3/2016'
$date:  'Month/Year : ' + (3/2016);
// 'Month/Year : 0.00149' 
// This is because 3/2016 is evaluated first.
$variable: 3/2016;      // Evaluated to 0.00149
$just-string: '3/2016'; // '3/2016'

如果你想在一个字符串是使用一个变量，而你又不想让这个变量直接变成了字符串，那就得使用到一个被称为变量插值，简单点说，就是使用#{}来包裹这个变量。来看一个简单的示例：

$name: 'Gajendar';
$author: 'Author : $name'; // 'Author : $name'
$author: 'Author : #{$name}';
// 'Author : Gajendar'

Color

$color: yellowgreen;            // #9ACD32
color: lighten($color, 15%);    // #b8dc70
color: darken($color, 15%);     // #6c9023
color: saturate($color, 15%);   // #a1e01f
color: desaturate($color, 15%); // #93ba45
color: (green + red);           // #ff8000

Sass具有分离颜色的所有通道，然后对应的颜色通道进行运算。
Sass基础——颜色函数

List

$font-list: 'Raleway','Dosis','Lato';
// Three comma separated elements
$pad-list: 10px 8px 12px;
// Three space separated elements
$multi-list: 'Roboto',15px 1.3em;
// This multi-list has two lists.

Maps

$styling: (
  'font-family': 'Lato',
  'font-size': 1.5em,
  'color': tomato,
  'background': black
);

h1 {
  color: map-get($styling, 'color');
  background: map-get($styling, 'background');
}

map-get( $m a p,$ key)：根据给定的key值，返回map中相关的值。
map-merge( $m a p 1,$ map2)：将两个map合并成一个新的map。
map-remove( $m a p,$ key)：从map中删除一个key，返回一个新map。
map-keys($map)：返回map中所有的key。
map-values($map)：返回map中所有的value。
map-has-key( $m a p,$ key)：根据给定的key值判断map是否有对应的value值，如果有返回true，否则返回false。
keywords($args)：返回一个函数的参数，这个参数可以动态的设置key和value。
SassMaps详解

Sass的表达式和控制命令

if()

@mixin test($condition) {
    $color: if($condition, blue, red);
    color:$color
}
.firstClass {
    @include test(true);
}

类似三元运算符

@if

@mixin txt($weight) {
    color: white;
    @if $weight == bold { font-weight: bold;}
    @else if $weight == light { font-weight: 100;}
    @else if $weight == heavy { font-weight: 900;}
    @else { font-weight: normal;}
}
.txt1 {
    @include txt(none);
}

@for

@for 指令常用于循环输出。@for 有两种使用方式：from start through end 和 from start to end，两者的区别在于，前者遍历的范围是 [start, end], 而后者的遍历范围是 [start, end-1]。在 @for 循环中使用一个固定变量来替代遍历到的元素。如果你想实现从大到小的遍历，只需让 start 大于 end 即可。下面是 @for 的一个简单示例：

@for $i from 1 through 4 {
    .col-#{$i} { width: 100/4 * $i + %;}
}

@each

@each 指令同样可以用于循环输出，和 @for 的差别在于，@each 通过遍历 list 或者 map 实现循环输出：

@each $usr in bob, john, bill, mike {
    .#{$usr}-avatar {
        background-image: url('/img/#{$usr}.png');
     }
}

此外，针对多个列表的遍历，我们也可以使用多个参数来保存相应的元素：

$alt: alert, yellow, red;

$sub: submit, white, green;

$bck: back, blue, transparent;

@each $type, $txt, $back in $alt,$sub,$bck {
    .#{$type}-button {
        color: $txt;
        background-color: $back;
    }
}

编译后：

.alert-button {
    color: yellow;
    background-color: red;
}
.submit-button {
    color: white;
    background-color: green;
}
.back-button {
    color: blue;
    background-color: transparent;
}

@while

$x:1;
@while $x < 13 {
    .col-#{$x} { width: 100/12 * $x;}
    $x: $x + 1;
};

逻辑操作符

操作符条件简介
and x and y 与操作
or x or y 或操作
not not x 取反

其他

辨析Sass中的Map和List

scss测试

使用Sassaby对Sass进行单元测试

调试

打印输出

@debug;
@warn;
@error.

scss项目文件目录规划及项目中运用技巧

SassGuidelines中文版本之四：项目文件管理
 CSS,Sass,SCSS,Compass,Less,BEM,SMACSS,OOCSS,ACSS,CCSS,WTFSS?
使用Sass管理颜色
 使用Sass管理z-index更好的解决方案
 Sass管理复杂的z-index
使用list-maps将你的Sass技术水平提高到另一层次