搜索
首页web前端html教程Sass进阶之路,之二(进阶篇)_html/css_WEB-ITnose

Sass之二(进阶篇)

1. 数据类型

1.1 Number

  • 数字类型,小数类型,带有像素单位的数字类型,全部都属于Number类型
  • Number类型详情请点击 这里,下面是小例子
1.$n1: 1.2;2.$n2: 12;3.$n3: 14px;4.$n4: 1em;

1.2 String

  • 不加双引号的,加双引号的,加单引号的全部都属于String类型
  • String类型详细内容请点击 这里, 下面是小demo
1.$s1: container;2.$s2: 'container';3.$s3: "container";

1.3 List

  • List类型的取值,语法 nth(list, index),第一个参数表示要取谁的,也就是list类型的变量的名称,第二个表示索引,这里的索引和JavaScript略有不同,JavaScript索引基本上都是从零开始,而这里是从一开始的.
  • List类型的方法的详情请点击 这里, 下面是小demo
1.$padding: 1px 5px 10px 15px;2..container {3.    padding: nth($padding,2) nth($padding,4);4.}5.6.// out css7..container { padding: 5px 15px; }

1.4 Map

  • Map类型取值,语法 map-get(map, key),第一个参数表示要取谁的,也就是map类型的变量的名称,第二个参数表示要取的 key
  • Map类型的方法的详情请点击 这里, 下面是小demo
1.$map: (color: red,background-color: #f00);2.3.body {4.    color: map-get($map, color);5.}6.7.// out css8.body { color: red; }

1.5 Color

1./*! 颜色类型*/2.$c1: blue;3.$c2: #fff;4.$c3: rgba(255,255,0,0.5);5.body {6.    color: $c3;7.}8.9.// out css10.body { color: rgba(255, 255, 0, 0.5); }

1.6 Boolean

  • 布尔类型分为两种 true和 false
  • $bt: true;
  • $bf: false;

1.7 Null

  • null的应用场景如下
1.$null: null;2.body {3.    @if $null == null{4.        color: red;5.    }6.}7.8.// out css9.body { color: red; }

2. 变量的操作

2.1 ==, !=

  • 支持所有的类型

2.2 ,=

  • 只支持Number类型

2.3 +,-,*,/,%

  • 进行计算的时候最好用空格进行隔开,例如减号如果不隔开,会把两个变量当成一个变量来处理.
  • 下面是一些小例子
1.// scss 2.$width1: 100px;3.$width2: 125px;4.span {5.    width: $width1 + $width2;6.}7.8.a:hover {9.    cursor: e + -resize;10.}11.a::before {12.    content: A + 'bc';13.}14.a::before {15.    content: "A" + bc;16.}17.p {18.    padding: 3px + 4px auto;19.}20.$version: 3;21.p::before {22.    content: "hello,Sass #{$version}"; /*! 这里如果加上大括号就会输出3,不加的话,会直接输出$version */23.}24.25.p {26.    font: (20px/10px);27.    width: $width2 / 2;28.    width: round($width2 / 2);29.    height: (100px / 2); /*! 这里如果想让100px/2 起作用的话需要加上一个小括号,告诉Sass这是一个表达式,让它进行计算*/30.}31.32.// out css33.span { width: 225px; }34.a:hover { cursor: e-resize; }35.a::before { content: Abc; }36.a::before { content: "Abc"; }37.p { padding: 7px auto; }38.p::before { content: "hello,Sass 3"; /*! 这里如果加上大括号就会输出3,不加的话,会直接输出$version */ }39.p { font: 2; width: 62.5px; width: 63px; height: 50px; /*! 这里如果想让100px/2 起作用的话需要加上一个小括号,告诉Sass这是一个表达式,让它进行计算*/ }40.41.

3.Mixin

3.1简单实例

  • 学过JavaScript的都对方法耳熟能详,那么Scss中的mixin就类似于JavaScript中的方法
1.// 没有参数的mixin2.@mixin test1 {3.    color: red;4.}5.6.body {7.    @include test1;8.}9.10.// 一个参数11.@mixin test2($color: red) {12.    color: $color;13.}14.body {15.    @include test2(#fff);16.}17.18.// 多个参数19.@mixin test3($color: red, $fontSize: 12px) {20.    color: $color;21.    font-size: $fontSize;22.}23.24.body {25.    // 直接传值, 不可以打乱顺序26.    // @include test(blue, 18px);27.28.    // 通过键值对的方式,可以打乱传值的顺序29.    @include test3($fontSize: 18px, $color: blue);30.}31.32.// out css33./* line 6, test1 */34.body { color: red; }35.36./* line 14, test2*/37.body { color: #fff; }38.39./* line 24, test3*/40.body { color: blue; font-size: 18px; }

3.2 传递多值参数

  • 传递多值参数的时候,需要在参数后面加上三个点 ...表示这个参数可能含有多条属性,告诉sass不要区分逗号了,把传递的参数当做一个参数来解析.
1.// scss2.// 多值传递3.@mixin test4($shadow...) {4.    text-shadow: $shadow;5.    -webkit-text-shadow: $shadow;6.    -moz-text-shadow: $shadow;7.}8..text {9.    @include test4(1px 1px 10px red, 0 0 5px blue);10.}11.12.// out css13..text { text-shadow: 1px 1px 10px red, 0 0 5px blue; -webkit-text-shadow: 1px 1px 10px red, 0 0 5px blue; -moz-text-shadow: 1px 1px 10px red, 0 0 5px blue; }

3.3 传递内容

  • 传递内容就好比在方法中弄了个占位符, 当你调用的时候,所写的内容会直接放在占位符那里;
1.// scss2.@mixin style-for-iphone {3.    @media only screen and (min-width:320px) and (max-width:568px){4.       @content;5.    }6.}7.@include style-for-iphone {8.    height: 100px;9.    font-size: 12px;10.}11.12.// out css13.@media only screen and (min-width: 320px) and (max-width: 568px) { height: 100px; font-size: 12px; }

4. 函数

4.1 内置函数

  • 内置函数是系统给我们定义好了的一些函数,详情请点击 这里

4.2 自定义函数

  • 提到函数我们不有自主的想到JavaScript中的函数,Sass需要在 function和 return前面加一个 @符号,例如:
1.// scss2.@function double($width){3.    @return $width * 2;4.}5.6.body {7.    $color: rgba(255,0,0, .3);8.    color: $color;9.    width: 100%;10.    height: 100%;11.    p {12.        // 内置函数13.        color: darken($color, 0.5); // 加深14.        background-color: lighten($color, 0.9);// 变浅15.        z-index: str-length('aaaa'); // 字符串的长度16.        z-index: str-index('aaabddd','b');// 指定字符的索引的位置17.        width: double(5px);18.    }19.}20.21.// out css22.body { color: rgba(255, 0, 0, 0.3); width: 100%; height: 100%; }23.body p { color: rgba(252, 0, 0, 0.3); background-color: rgba(255, 5, 5, 0.3); z-index: 4; z-index: 4; width: 10px; }

5. 编译输出

5.1 debug

  • @debug "这里的内容会在控制台输出"

5.2 warn

  • @warn "这里的内容会在控制台输出"

5.3 error

6. 条件语句及循环语句

6.1 条件语句

  • if的几种用法,如下
1.// scss2./*!if 的用法*/3.$width: 800;4.body {5.    // 跟三目运算符类似6.    color: if($width > 800, blue, red);7.}8.@if $width > 800 {9.    body {10.        color: red;11.    }12.} 13.@else if $width == 800 {14.    p {15.        color: blue;16.    }17.}18.@else {19.    body{ 20.        color: blue;21.    }22.}23.24./// out css25.body { color: red; }26.p { color: blue; }

6.2 循环语句

  • 语法1 for $i from 1 to 10
    • 此语句表示从1 到10,但是不包括10
  • 语法2 for $i from 1 through 10
    • 此语句表示从1到10,包括10
  • 下面代码是 through的用法,to的用法在这里就不演示了
1.// scss2.@for $i from 1 through 5 {3.    .span#{$i} {4.        width: 20% * $i; 5.    }6.}7.8.// out css9..span1 { width: 20%; }10..span2 { width: 40%; }11..span3 { width: 60%; }12..span4 { width: 80%; }13..span5 { width: 100%; }

6.3 while

  • 使用while 需要注意一下几点,

    • 第一: 变量要提前声明
    • 第二: while里面可以设置步长
1.// scss2.$j: 6;3.@while $j > 0 {4.    .p#{$j} {5.        width: 20% * $j;6.    }7.    $j: $j - 3;8.}9.10.// out css11..p6 { width: 120%; }12..p3 { width: 60%; }

7. each

7.1 常规遍历

1.// each 普通的用法2.$k: 1;3.$color: red, green, blue;4.@each $c in $color {5.    .div#{$k} {6.        color: $c;7.    }8.    $k: $k + 1;9.}10.11.// out css12.13..div1 { color: red; }14..div2 { color: green; }15..div3 { color: blue; }16.

7.2 遍历list

  • 这里出现的方式是以一个键一个值的形式出现的,如果是但数据的变量,那么可以在外边顶一个索引,内部执行加1 操作,也可以得到相应的效果.
  • $key表示键值, $color表示值
1.@each $key, $color in (default, green), (dange,blue), (error, red) {2.    .aler-#{$key} {3.        color: $color;4.    }5.}6.7.// out css8..aler-default { color: green; }9..aler-dange { color: blue; }10..aler-error { color: red; }

7.3 遍历map

  • 遍历map $key表示键值, $val表示值
1.//scss2.@each $key, $val in (default: green, dange: blue, error: red) {3.    .alert-#{key} {4.        color: $val;5.    }6.}7.8.// out css9..alert-key { color: green; }10..alert-key { color: blue; }11..alert-key { color: red; }12.

8. 小实例

  • 这里写了个小实例, 有兴趣的朋友可以看看,其实我也是抄的别人的实例,等会去写个小项目,orz我要睡觉了,明天写吧….好累的说,代码粘在下面了…
1.// scss2.@function buildContainer($num: 5) {3.    $map: (defaultValue: 0);4.    $rate: percentage(1 / $num); // percentage 求出百分比5.    @for $i from 1 through 5 {6.        $tempMap: (col#{$i} : $rate * $i);7.        $map: map-merge($map, $tempMap);8.    }9.    $map: map-remove($map, defaultValue);10.11.    @return $map;12.13.}14.@mixin buildContainer($num: 5) {15.    $map: buildContainer($num);16.    @each $key, $val in $map {17.        .#{$key} {18.            width: $val;19.        }20.    }21.}22.23.@include buildContainer();24.25.// out css26..col1 { width: 20%; }27..col2 { width: 40%; }28..col3 { width: 60%; }29..col4 { width: 80%; }30..col5 { width: 100%; }
声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
HTML的未来:网络设计的发展和趋势HTML的未来:网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript:比较概述HTML与CSS vs. JavaScript:比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是:HTML负责内容结构,CSS负责样式,JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容,确保语义化。2.CSS通过选择器和属性控制网页样式,使其美观易读。3.JavaScript通过脚本控制网页行为,实现动态和交互功能。

HTML:是编程语言还是其他?HTML:是编程语言还是其他?Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增强WebevebDevelopment。

HTML:建立网页的结构HTML:建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义,使用、、等标签。2.提供语义化标记,如、、等,提升SEO效果。3.通过标签实现用户交互,需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号,需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站:HTML的力量从文本到网站:HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言,通过标签和属性定义网页结构和内容。1)HTML通过标签组织文档结构,如、。2)浏览器解析HTML构建DOM并渲染网页。3)HTML5的新特性如、、增强了多媒体功能。4)常见错误包括标签未闭合和属性值未加引号。5)优化建议包括使用语义化标签和减少文件大小。

了解HTML,CSS和JavaScript:初学者指南了解HTML,CSS和JavaScript:初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色:构建Web内容HTML的角色:构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容,使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码:仔细观察术语HTML和代码:仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent,而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1)htmldefineswebpagertuctureduseTags.2)“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
1 个月前By尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器