sass03 变量、样式导入

demo1.scss

@import "css.css";    //导入css文件
@import "http://ss/xx";    //导入css文件
@import url(css.css);    //导入css文件
@import "a.scss";    //导入scss文件

$fontsize:14px ;
$fontsize:12px !default;//变量后面的值会覆盖前面的值,默认值

$paddings: 5px 10px 5px 10px;//多值变量

$maps: (color:red,borderColor:blue);//多值变量

$className:main;//特殊变量
$text-info:lightgreen;//特殊变量

body{
    $color:red !global; //定义全局变量,以便后面的footer可以访问到,
    color:$color;
    font-size:$fontsize;
    padding:$paddings;
    padding-left:nth($paddings, 2);//下标从1开始

}
footer{
    color:$color;
    background-color:map-get($maps,borderColor);
}
.#{$className}{//使用main变量
    width:50px;
}

.text-info{
    color:$text-info;
}

编译后的demo1.css

@import url(css.css);
@import "http://ss/xx";
@import url(css.css);        //导入css文件原样输出
head {              //导入scss文件,会把scss文件的代码编译出来
  width: 100px; }

body {
  color: red;
  font-size: 14px;
  padding: 5px 10px 5px 10px;
  padding-left: 10px; }

footer {
  color: red;
  background-color: blue; }

.main {
  width: 50px; }

.text-info {
  color: lightgreen; }

/*# sourceMappingURL=demo1.css.map */

a.scss

head{
    width:100px;
}
时间: 2024-10-20 19:11:08

sass03 变量、样式导入的相关文章

Web前端面试指导(十一):样式导入有哪些方式?

样式导入方式 link import 使用方式 link的使用 [css] view plain copy  <link href="index.css" rel="stylesheet"> import的使用 [css] view plain copy  <style type="text/css"> @import "index.css"; </style> 不同点 link除了引用样式

Bash 是如何从环境变量中导入函数的

在上文中曾说到: 所谓的环境变量的真实面目其实就是个任意字符串 Bash 在启动时会将 environ 数组中包含 = 号的字符串导入成为自己的变量 Bash 在启动外部命令时会将自己内部标记为环境变量的变量重组成字符串数组赋值给 environ 本文中继续深入讲三点: environ 数组中可能存在 = 左边名字相同的元素,也就是同名的环境变量,Bash 是怎么导入的? Bash 还可以从环境变量中导入函数,甚至同时导入两个同名的变量和函数 Bash 还可以同时导出两个同名的变量和函数 如果有

(5)css样式导入

样式的组成 1.选择器:将样式与页面中的某一个或某些标签建立联系,就要使用选择器,在head标签下写一个style标签,将需控制参数的标签名写在这个style标签下,设置属性即可通过css来控制html的样式,这就是选择器 2.作用域:作用域就是style标签下需要控制的标签名后面的{},这个{}内的参数就是作用域参数 3.样式块:作用域里面的参数语句就是样式语句,这个作用域就是样式块 css的引入方式 1.行间式样式导入,直接将css样式写在标签的style属性中 优点:对样式操作简单粗暴 缺

样式导入方式总结

link与import <link href="index.css" rel="stylesheet"> <style type="text/css"> @import "index.css"; </style> 不同点 link除了引用样式文件,还可以引用图片等资源文件,而import只引用样式文件 <link rel="shortcut icon" href=&

Sass学习之路:注释、变量以及导入

前言 由于.sass不兼容CSS代码,所以以下内容完全使用.scss的语法. Sass注释 Sass中除了提供CSS中的标准注释之外,还提供了一种静默注释: /* 我是标准注释 */ // 我是静默注释 标准注释大多数情况下(一种例外:设置输出风格为compressed)是会生成到最终的CSS中的,而静默注释的话,只是Sass的注释,是不会被生成到CSS文件中的. 如果想,就算设置输出风格为compressed也要加入特定注释呢?那么可以采用重要注释写法,如下: /*! 我的重要注释 */ 也就

Postman使用手册1——导入导出和发送请求查看响应

现在的web和移动开发,常常会调用服务器提供restful接口进行数据请求,为了调试,一般会先用工具进行测试,通过测试后才开始在开发中使用.这里介绍一下如何在chrome浏览器利用postman应用进行restful api接口请求测试. 一.导入导出打包的应用 在Postman中导入导出我们的 测试数据包 和 工作环境 非常的方便: 导出数据包: 导出数据包.png 导出工作环境: 导出工作环境 1.png 导出工作环境 2.png 导入数据包: 导入数据包.png 导入工作环境: 导入工作环

微信小程序--动态添加class样式

尺寸单位: rpx(responsive pixel): 可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素.所以用rpx可解决适配问题 样式导入: /** app.wxss **/ @import "common.wxss"; 内联样式: 框架组件上支持使用 style.class 属性来控制组件的样式. style:静

linux之bash变量

bash变量之高级部分 1.变量扩展 ${变量名称}                     变量扩展                          例如:${filename} $(命令)                            命令替换                          例如:$(ls /) $((算术式))                       算式扩展                          例如:$((9+9)) 变量扩展:一种简易的条

HTML CSS样式基础

一.css 1.什么是css? Cascading Style Sheet 级联样式表 改变样式的一个工具,说白了,就是为了让我们的页面好看, HTML底层封装了css这样一个工具. 2.怎么使用css a.style 风格.样式 这个关键词写到标签内部,可以修改标签的样式 注意:写在标签内部!也就是>里面 3.css样式,分为三种 a.行内样式表 <p style="color:#0FC">111111111111</p> 其中:style="