SASS 学习笔记 II

这篇具有很好参考价值的文章主要介绍了SASS 学习笔记 II。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

SASS 学习笔记 II

上篇笔记,SASS 学习笔记 中包含:

  • 配置

  • 变量

  • 嵌套

    这里加一个扩展,嵌套中有一个 & 的用法,使用 & 可以指代当前 block 中的 selector,后面可以追加其他的选择器。如当前的 scope 是 form,可以在嵌套中使用 &-selector 指代 form-selector,如:

    HTML 有:

    <!-- Navbar -->
    <nav class="navbar">
      <div class="navbar-navigation">
        <div class="navbar-navigation-left"></div>
        <div class="navbar-navigation-right"></div>
      </div>
    </nav>
    <!-- End of Navbar -->
    

    scss 写:

    .navbar {
      &-navigation {
        &-left {
        }
    
        &-right {
        }
      }
    }
    
  • 扩展

  • mixin

  • function

  • placeholder selector

  • import & partials

这部分就这剩下的一些特性/功能去学习一下,过了一遍剩下的内容,SCSS 也差不多学完了。

SCSS 高级特性

数据类型

  • 数字

    这个基本是数字单位,如 100px,100%,100,0.1 等

  • 字符串

    这个常用于字体类和 string interpolation,如 font-family: 'Arial',string interpolation 下面会说

  • 颜色

    hex、hsl、rgb 这种

  • 布尔值

  • list

    SCSS 中的 list 一般用逗号做分隔符,不过有些和 css 一致的可以用空格,如:

    // 不用字符串 sass 会提示报错,node-sass好像没什么问题就是了
    $colors: 'red', 'orange';
    $box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    
  • map

    用法如下:

    $colors: (
      primary: red,
      secondary: green,
      tertiary: blue,
    );
    
    // 获取方式使用内置的 map-get
    html {
      background-color: map-get($colors, primary);
    }
    

    我个人觉得 map 获取单一值的意义不大,不过搭配上变量+循环/if 进行配置之类的倒是很方便。

  • null

    一般不存在的值 SCSS 默认就是 null,出现获取/使用 null 的时候,终端也会报错。

  • 特殊

    global, selector 和 function

interpolation

interpolation 就是一个将变量、表达式或选择器转换成一个字符串的方式,语法就是使用 #{},使用方法有:

$color: red;

body {
  color: #{$color};
}

$selector: '.button';
#{$selector}: {
  background-color: #{$color};
}

同样,这种搭配循环/if 很好用。

for 循环

语法为:@for $i from <start> through <end> {}@for $i from <start> to <end> {},前者包含 end,后者不包。

同样搭配上面介绍过的一些特性会比较好用,如:

$colors2: (
  1: red,
  2: green,
  3: blue,
  4: orange,
);

// @for $i from 1 to 4, 4 is exclude
@for $i from 1 through 4 {
  .paragraph-#{$i} {
    background-color: map-get($map: $colors2, $key: $i);
  }
}

编译后的结果为:

.paragraph-1 {
  background-color: red;
}

.paragraph-2 {
  background-color: green;
}

.paragraph-3 {
  background-color: blue;
}

.paragraph-4 {
  background-color: orange;
}

each 循环

有点像 JS 的 for each,如果只是想获取 list 中的值,用 @each 会方便一些,也可以不需要用 map-get

如上面的循环用 each 的写法为:

@each $i, $c in $colors2 {
  .paragraph-#{$i} {
    background-color: #{$c};
  }
}

这里不使用解构的方法也可以用 nth() 实现,如:

@each $item in $colors2 {
  .paragraph-#{nth($item, 1)} {
    background-color: #{nth($item, 2)};
  }
}

就是没这么方便。

if

也是 if/else-if/else 的用法,我觉得这种用在 media query 特别的方便。

案例

slideshow

这个主要还是用 animation 来实现的,不过使用 SCSS 的循环确实很方便,原生 CSS 定义 delay 的写法为:

.slideshow-slide:nth-child(1) {
  animation-delay: 0s;
}
.slideshow-slide:nth-child(2) {
  animation-delay: 4s;
}
.slideshow-slide:nth-child(3) {
  animation-delay: 8s;
}
.slideshow-slide:nth-child(4) {
  animation-delay: 12s;
}
.slideshow-slide:nth-child(5) {
  animation-delay: 16s;
}

使用 SCSS 的写法:

$animList: 1 0s, 2 4s, 3 8s, 4 12s, 5 16s;

@each $item in $animList {
  .slideshow-slide:nth-child(#{nth($item, 1)}) {
    animation-delay: nth($item, 2);
  }
}

或者

$animList: 1, 2, 3, 4, 5;

@each $item in $animList {
  .slideshow-slide:nth-child(#{$item}) {
    animation-delay: #{($item - 1) * 4}s;
  }
}

同样的写法也可以搭配 nth-child

$socialMediaColors: 1 #3b5998, 2 #b31217, 3 #dc4e41, 4 #55acee, 5 #517fa4, 6
    #0077b5;

@each $color in $socialMediaColors {
  .social-icons-item:nth-child(#{nth($color, 1)}) .social-icons-link {
    color: nth($color, 2);
    border: 0.1rem solid nth($color, 2);
  }
}

最终完成的效果:

SASS 学习笔记 II,# CSS,sass,学习,笔记

media query

media query 主要依赖 mixin,用法如下:文章来源地址https://www.toymoban.com/news/detail-654617.html

@mixin response($breakpoint) {
  @if ($breakpoint == xl) {
    @media (max-width: 1200px) {
      @content;
    }
  } @else if ($breakpoint == lg) {
    @media (max-width: 1000px) {
      @content;
    }
  } @else if ($breakpoint == md) {
    @media (max-width: 760px) {
      @content;
    }
  } @else if ($breakpoint == sm) {
    @media (max-width: 560px) {
      @content;
    }
  }
}

html {
  font-size: 62.5%;

  @include response(md) {
    font-size: 56.25%;
  }

  @include response(sm) {
    font-size: 50%;
  }
}

到了这里,关于SASS 学习笔记 II的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端-CSS预处理器Sass

    CSS预处理器Sass sass简介 使用vscode开发sass sass语法 scss语法 sass变量 sass嵌套 sass混合器 sass继承 sass操作符 sass函数 sass导入 sass作用域 sass条件语句 scss媒体查询和响应式设计 第三方的Sass函数和混合器库 Sass编译器 Sass模块

    2024年01月22日
    浏览(53)
  • css开发技巧(部分结合sass使用)

    一、css 选择器 基础选择器 选择器 别名 说明 版本 常用 tag 标签选择器 指定类型的标签 1 √ #id ID 选择器 指定 id 的标签 1 √ .class 类选择器 指定类名的标签 1 √ * 通配选择器 所有类型的标签 2 √ div p 后代选择器 元素的所有后代元素 1 √ divp 子代选择器 所有父级是 div 元素

    2024年02月10日
    浏览(43)
  • 【Css】Less和Sass的区别:

    一、定义: 【1】Less Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。 【2】Sass Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌

    2024年02月10日
    浏览(43)
  • CSS革命:用Sass/SCSS引领前端创新

    在现代的前端开发中,CSS已成为呈现网页和应用程序样式的核心。然而,原生的CSS语法在大型项目中可能变得混乱、冗长且难以维护。 为了解决这些问题,SCSS(Sass CSS)和Sass(Syntactically Awesome Style Sheets)应运而生。 本文将带你简单了解sass和scss。 sass中文网 scss中文网 SCSS(

    2024年02月13日
    浏览(40)
  • css ,less和sass的区别[简洁易懂

    CSS、Less和Sass都是用于样式表编写和管理的技术,它们之间有以下区别: CSS(层叠样式表)是一种标准的样式表语言,用于描述网页的外观和样式。它是前端开发中最基础和常用的技术,所有网页都需要使用CSS来定义样式。 Less是一种CSS预处理器,它在CSS的基础上提供了更多

    2024年02月11日
    浏览(56)
  • 探索CSS预处理器:Sass、Less与Stylus

    🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_ CSDN 博客专家、23年度博客之星前端领域TOP1 🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你

    2024年03月11日
    浏览(52)
  • 2022 Stylelint 配置详细步骤(css、less、sass、vue适用)

    目录 插件安装 本地配置  忽略文件配置 依赖安装 配置项文件 Endings  Tips 插件安装 我用的软件是VScode,搜索插件: Stylelint   (  版本:v1.2.2 ) 本地配置 打开VScode的设置,打开 settings.json 或者直接在设置里点击这个图标可以自动跳转:  在里面配置一下代码,可根据自己的需

    2024年02月04日
    浏览(49)
  • 一文分清:Less、Sass、Scss、stylus,看看与css的对比

    CSS 预处理器是一种将预先定义的语法和功能添加到 CSS 中的工具。它们允许开发人员使用变量、嵌套规则、混合、继承等功能,以更高效和可维护的方式编写样式表。   CSS 预处理器的作用包括: 变量和计算 :预处理器允许开发人员使用变量来存储颜色、字体、尺寸等值,以

    2024年01月25日
    浏览(43)
  • 挖坑记录:vite使用sass 报错:[plugin:vite:css] expected “;“.

    vite 引入sass依赖包,然后在vite.config.ts配置一下scss,这里就不详细说,不会的自行百度。 运行 yarn dev 项目 浏览器报错: 终端报错: 这时候一脸懵逼的,想着依赖包已经引入,vite.config.ts也配置了,开始以为是版本问题,或者以为是stylelint 样式约束问题。然后捣鼓了半天,

    2024年02月16日
    浏览(41)
  • sass笔记

    用法说说明 声明变量 通过$标识符进行命名及引用 混合器 类似vue中的函数 通过 @mixin标识定义 @include 标识调用 父选择器标识 @extend 进行继承 可嵌套 可导入 通过 @import \\\'文件位置’ 、进行导入 用法 效果

    2024年02月12日
    浏览(26)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包