在使用scss过程中,一直会有个疑惑它的内部是如何运作的。实际上它的运作与现实生活中一直。如果你想要移除一个值的单位,你想要将它除以1单位。比如 50cm 我想取它的数字,那么我们除以1cm,得到结果是 50(由1cm x 50 = 50cm得出)。同理这个原理也适用于scss。
$number: 50px;
$value: $number / 1px;
// -> 50
由上面的原理写出以下scss function:
/// 单位移除
/// @param {Number} $number - 需要移除单位的
/// @return {Number} - 无单位的数字
@function strip-unit($number) {
@if type-of($number) == 'number' and not unitless($number) {
@return $number / ($number * 0 + 1);
@return $number;
这个计算可能看起来很奇怪,但实际上是有道理的。为了得到 $number 的1单位,我们可以将 $number 乘以 0,然后再加 1。
$number: 50px;
$value: strip-unit($number);
// -> 50
扩展: px转em
/// px 转 em
/// @param {Number} $target-size px 值
/// @param {Number} $context 继承的字体大小
/// @return {Number} 对应以em单位的值
@function px2em($target-size, $context: $base-font-size) {
@if not unitless($target-size) {
$target-size: strip-unit($target-size);
@if not unitless($context) {
$context: strip-unit($context);
@return ($target-size / $context) * 1em;
本课程从基础的sass概述讲起,深入浅出地介绍sass的产生背景、编译方式、基本语法,通过实践页面的开发,全面介绍了如何使用sass结合开发工具,实现编写sass代码的过程。
我个人平时比较常使用的是Less,但是公司前端开发是在Vue中用Sass,为了统一一下语言,所以学习一下Sass。
Sass和Less一样是Css的预处理器,相比于Css需要重复写大量重复的样式,Sass和Less的好处可以节省大量重复的代码操作,可以通过嵌套样式代码,父子节点之间的关系更加明确,同时还有引入变量,循环,函数等
Sass Or Scss
其实在官网显示的是sass,但是我们在vue中通常写的是lang = 'scss',其实两个比没有太大的区别,简言之
scss是一门很好用的类css,在现实中的工作当中几乎都是不采用css的,而是使用类css语言。全局变量是元素外声明的变量,局部变量是在元素里声明的变量,重复声明时局部变量会覆盖全局变量;局部变量值后加上!让css更加简洁,适应性更强,阅读性更佳,更易于代码的维护等诸多好处。特性丰富,scss拥有比其他的任何css扩展语言更丰富的功能和特性。
文章目录使用scss循环样式代码,减少代码量1、首先定义一个scss变量用于存储所有的type类型2、其次定义一个scss自定义函数用于 return 对应的数据变量类型3、最后也就是对应type类型所展示的代码4、完整代码+对应react代码及呈现效果
使用scss循环样式代码,减少代码量
1、首先定义一个scss变量用于存储所有的type类型
$type:('success', 'primary', 'danger', 'warning', 'info', 'default');
2、其次定义一个sc
<style lang="scss" scoped>
$multiple: 2rpx;
// 转换函数 (15) ==> 30rpx (15,30) ==> 30rpx 60rpx
// 转换函数 params 可传参数 无上限
@function cover($t...) {
$i:1;
$result:0;
得分点 px、rem、em、vw、vh 标准回答px:pixel像素的缩写,绝对长度单位,它的大小取决于屏幕的分辨率,是开发网页中常常使用的单位。em:相对长度单位,在 `font-size` 中使用是相对于父元素的字体大小,在其他属性中使用是相对于自身的字体大小,如 width。如当前元素的字体尺寸未设置,由于字体大小可继承的原因,可逐级向上查找,最终找不到则相对于浏览器默认字体大小。rem:相对长度单位,相对于根元素的字体大小,根元素字体大小未设置,使用浏览器默认字体大小。vw:相对长度单位,相对于视窗