资讯专栏INFORMATION COLUMN

scss的基本用法

Yi_Zhi_Yu / 1040人阅读

摘要:一定义变量定义变量基本用法变量作为字符串拼接二简单的计算加减乘除三选择器嵌套四继承样式五使用,强大之处在于可以传递参数不传参传参初始化默认值六导入外部七高级用法,循环语句和自定义函数的使用自定义函数

一、定义变量

二、简单的计算 加减乘除

三、选择器嵌套


        

四、继承样式 @extend

五、@mixin @include 使用,强大之处在于可以传递参数

六、导入外部scss、css @import

七、高级用法,循环语句和自定义函数的使用

@for $i from 1 to 10 {
  // .myLi1 .myLi2 .myLi3 ...... .myLi10
  .myLi#{$i} {
    border: #{$i}px solid #468dcc;
  }
}

// 自定义函数
@function myScssFun($p) {
  @if $p > 10 {
      @return $p;
  } @else {
      @return $p * 2;
  }
}
div {
    font-size: myScssFun(10px);
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/116270.html

相关文章

  • SASS详解

    摘要:以前看到之类的工具觉得应该比较难,今天接触了之后发现挺好用的,主要是方便了的编写。具体可以看慕课网教程编译方法在命令行输入编译单个文件编译整个文件夹到文件夹也就是这样的语法下文中我都这样写。这里贴一张慕课网拿到的表格。 以前看到SASS之类的工具觉得应该比较难,今天接触了之后发现挺好用的,主要是方便了CSS的编写。在编写比较大的项目的时候,由于内容很多,因此样式表也会比较繁杂,如果要修...

    余学文 评论0 收藏0
  • SCSS学习笔记(一)

    摘要:的由来就是加强版的,要讲那就一定要从讲起英文全称是一个最初由设计并由开发的层叠样式表语言。年发行,年版本稳定,设计和开发分开进行,让这个语言的功能相当完善。变量允许使用变量,所有变量以开头。 SCSS的由来 SCSS就是加强版的CSS,要讲SCSS那就一定要从SASS讲起 SASS Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Ha...

    simpleapples 评论0 收藏0
  • SASS学习记录

    摘要:前言很久没有用文章记录自己的学习历程了,主要是因为实在写的不行,相比大牛写的博客,我这只能算是东拼西凑或者说是读书笔记。以前我只使用外部,现在的更加好用,所以在学习过程中记了一些笔记。在后面加一个感叹号,表示这是重要注释。 前言 很久没有用文章记录自己的学习历程了,主要是因为实在写的不行,相比大牛写的博客,我这只能算是东拼西凑或者说是读书笔记。但是今天还是拾起笔来了,虽然没什么干货,但...

    tylin 评论0 收藏0
  • SASS学习记录

    摘要:前言很久没有用文章记录自己的学习历程了,主要是因为实在写的不行,相比大牛写的博客,我这只能算是东拼西凑或者说是读书笔记。以前我只使用外部,现在的更加好用,所以在学习过程中记了一些笔记。在后面加一个感叹号,表示这是重要注释。 前言 很久没有用文章记录自己的学习历程了,主要是因为实在写的不行,相比大牛写的博客,我这只能算是东拼西凑或者说是读书笔记。但是今天还是拾起笔来了,虽然没什么干货,但...

    HollisChuang 评论0 收藏0
  • SCSS 日常用法

    摘要:生成相互嵌入这个是最常用的,通过定义一个类或方法,在其它地方通过引用这个方法或类。生成注意事项不能继承这种连续组合的类,应该写为常用方法详见不知道别人,反正我最常用的就是颜色方法了。 SCSS 日常用法 本文是以自己的理解起的结构,要看详细的帮助文档,参阅这里:https://sass-lang.com/documen... 你需要了解的 less 和 sass 是两种 css 预编...

    Lyux 评论0 收藏0

发表评论

0条评论

Yi_Zhi_Yu

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<