SCSS的一些小笔记

rottengeek 发布于2019-08-26 14:05 / 1250人阅读

摘要：嵌套选择器注释以为首会保留输出到变量有作用域，其中和代表同一个变量插值支持参数声明重复代码使用不支持参数声明重复代码使用和区别除了是否支持参数外，是把重复的代码抄到选择器内，而则是把选择器抄到代码头上。声明使用使属性可复用

嵌套选择器：&

.row {
  flex-wrap: wrap;
  border: 1px solid red;
  display: flex;
  &.align-left {
  }
}

注释：以！为首会保留输出到CSS

变量：$width:5em;(有作用域，其中$m-width和$_width代表同一个变量)

插值：#{}

@mixin：支持参数

//声明
@minxin name{
//重复代码
}
//使用
@include name{
}

%placeholder：不支持参数

//声明
% name{
//重复代码
}
//使用
@extwnd %name{
}

@mixin 和 %placeholder 区别：除了是否支持参数外，@mixin 是把重复的代码抄到选择器内，而%placeholder 则是把选择器抄到代码头上。

@Function

//声明
@function x2($value){
    @return $value*2
}
//使用
width:x2(80px);//使属性可复用

云服务器 GPU云服务器 ddos一些比较小的网站 java的一些代码深度学习的一些应用 php实用的一些代码

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

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

前端小项目之在线便利贴

摘要：实现的效果如下界面可能不是太好看，考虑到容器的高度会被拉长，因此没有用图片做背景。实现的效果如下： showImg(https://segmentfault.com/img/remote/1460000011155402); 界面可能不是太好看?，考虑到容器的高度会被拉长，因此没有用图片做背景。预览便利贴涉及的知识点 sass(css 预编译器) webpack（自动化构...

microelec 2019-08-22 11:06 评论0 收藏0
前端之Sass/Scss实战笔记

摘要：有两种语法规则目前新的语法规则从开始被称为时髦的它是语法的的拓展级，就是说每一个语法正确的文件也是合法的文件，文件使用作为拓展名。备注注意源文件和目标文件之间是冒号，与编译命令中为空格不同。 Introduction Sass 有两种语法规则(syntaxes),目前新的语法规则（从 Sass 3开始）被称为 SCSS( 时髦的css（Sassy CSS）),它是css3语法的的拓展级...

Sike 2019-08-28 18:17 评论0 收藏0
SCSS学习笔记（一）

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

simpleapples 2019-08-29 16:37 评论0 收藏0
学习笔记 - Sass的安装与使用手册

摘要：现在将学习笔记整理在这里，供大家参考。的安装的编辑器安装方法有很多，大致能分为两种应用程序和命令行界面。如果已经安装过，也可以使用指令如果提示权限不足，在命令行前加上即可。参考网页编辑器的使用的使用很简单，记住两条指令即可。最近因为工作需要，自学了Sass。现在将学习笔记整理在这里，供大家参考。 1. Sass的安装 Sass的编辑器安装方法有很多，大致能分为两种：应用程序（appl...

Jeff 2019-08-29 16:57 评论0 收藏0
我的webpack学习笔记（一）

摘要：前言在上一篇文章中我介绍了学习前的准备工作，下面开始的学习。目标一般我们接触到的关于的文章，都是以解读官方文档为主，而且是针对单页面项目的应用。我先在假设要做一个多页面应用，该如何去通过打包。前言在上一篇文章中我介绍了学习webpack前的准备工作，下面开始webpack的学习。 *创建webpack-demo文件夹 $ mkdir webpack-demo $ cd webpac...

wh469012917 2019-08-21 11:48 评论0 收藏0