scss怎么引入到html,Sass 导入指令
描述
导入指令,导入SASS或SCSS文件。 它直接需要导入文件名。 在SASS中导入的所有文件将在单个CSS文件中组合。当我们使用@import规则时,很少有事情编译到CSS:文件扩展名<.css>
文件名以http://开头
文件名为url()
@import包含任何媒体查询。
例如,使用以下代码创建一个SASS文件:@import "style.css";
@import "http://tutorialspoint.com/bar";
@import url(style);
@import "style" screen;
您可以通过使用以下命令让SASS查看文件,并在SASS文件更改时更新CSS:sass --watch C:\ruby\lib\sass\style.scss:style.css
上面的代码将编译成CSS文件,如下所示:@import url(style.css);
@import "http://tutorialspoint.com/bar";
@import url(style);
@import "style" screen;
以下是使用@import规则导入文件的方法:
部分
部分是SASS或SCSS文件,它们使用下划线在名称(_partials.scss)开头写入。可以在SASS文件中导入部分文件名,而不使用下划线。 SASS不编译css文件,但使用下划线,它只使SASS理解它是部分的,不应该生成CSS文件。
嵌套@import
@import指令可以包含在@media规则和CSS规则中。基本级文件导入其他导入文件的内容。导入规则嵌套在与第一个@import相同的位置。
例如,使用以下代码创建一个SASS文件:.container
{
background: #ffff;
}
将以上文件导入以下SASS文件,如下所示。h4 {
@import "example";
}
上面的代码将编译成CSS文件,如下所示:h4 .container {
background: #ffff;
}
句法
以下是用于在SCSS文件中导入文件的语法:@import 'stylesheet'
例子
以下示例演示如何在SCSS文件中使用@import:
import.html
Import example of sass
Example using Import
Import the files in SASS
- Red
- Green
接下来,创建文件_partial.scss。
_partial.scssul{
margin: 0;
padding: 1;
}
li{
color: #680000;
}
接下来,创建文件style.scss。
style.scss@import "partial";
.container
{
background: #ffff;
}
h1
{
color: #77C1EF;
}
h4
{
color: #B98D25;
}
您可以通过使用以下命令让SASS查看文件,并在SASS文件更改时更新CSS:sass --watch C:\ruby\lib\sass\style.scss:style.css
接下来执行上面的命令,它将用下面的代码自动创建style.css文件:
style.cssul {
margin: 0;
padding: 1; }
li {
color: #680000; }
.container {
background: #ffff; }
h1 {
color: #77C1EF; }
h4 {
color: #B98D25; }
输出
让我们执行以下步骤,看看上面的代码如何工作:将上面的html代码保存在import.html文件中。
在浏览器中打开此HTML文件,将显示如下输出。
scss怎么引入到html,Sass 导入指令相关推荐
- sass导入sass_SASS的力量
sass导入sass 一点历史 (A bit of history) SASS appeared in 2006 and stands for Syntactically Awesome Styles ...
- sass导入sass_使用CodePen学习Sass,第一部分
sass导入sass The greatest challenge for most developers to learning Sass isn't the concept of preproce ...
- vue项目 在style标签中引入css,less,sass的方法
vue项目 style标签引入 less sass less和sass需要安装相应的依赖 package.json 中加上 并再次npm install 重启项目 "less": ...
- Sass @at-root 指令用法示例
Sass@at-root指令示例 @at-root指令可以将一个或多个样式规则生成在样式文件根层级上,而不是嵌套在其父选择器中: 例子一 .parent {...@at-root .child { . ...
- sass导入sass_如何使用Sass Mixins和Loops
sass导入sass by Jason Arnold 杰森·阿诺德(Jason Arnold) 如何使用Sass Mixins和Loops (How to use Sass Mixins and Lo ...
- 全局scss封装引入背景图片路径报错
最近使用scss做了全局的mixin封装,用到背景图,意外发现通过相对路径引入图片后报错,大致意思为图片路径不对,改为了使用@代替src路径引入图片依然报错,一番百度后带出解决方案通过 ~@ 代替sr ...
- android 引入 .so,android studio导入so文件,并调用其中的方法
在单位的项目中,需要一个算法来计算一个特殊值,可是相关的部门却不给计算公式,只是给了几个封装好的so文件和一个.h文件,让传入几个值,然后得到相应的值.拷.....没法子,人家不给,我们只好调用这个了 ...
- html中将scss转编译为css,SASS把scss转化为css的四种转化方式与命令
在终端输入命令: $ sass --watch scss:css --style expanded 即可实时把scss文件夹下的scss文件转化为css文件放入css文件夹中, 命令中使用的是expa ...
- vue main.js 引入 全局 js 统一导入 js
main.js 代码 // 导入axios import axios from axios // 添加到 vue 的 this 属性上(全局使用) Vue.prototype.axios = axio ...
最新文章
- 传粉飞行器是拯救传粉昆虫危机的利器还是毁灭者
- 那些离开大厂,回归学术界的科学家们!
- expdp导出数据库实例应用
- python0.1+0.2_为什么0.1+0.2=0.30000000000000004
- [Effective C++ --029]为“异常安全”而努力是值得的
- VMware Ubuntu 共享文件夹
- 简单了解各种序列化技术-XML序列化框架介绍
- Hadoop 在 windows 7 64位的配置(一)|非cygwin
- Letters比赛第六场1002 Babelfish解题报告
- android使用lombok_Android Studio 使用Lombok
- JavaScript中如何自定义属性操作
- 一篇很好的面试文章 程序员面试IT公司的33个小贴士
- 看了三篇韩寒的博客文章
- MATLAB函数或变量无法识别
- 抖音短视频去水印方法 2018短视频伪原创
- redhat linux 系统修复,简述rhel7系统修复
- 个人计算机多核cpu好处,多核CPU的优缺点
- IDEA输入字母间距变大报红
- 武汉理工计算机专考研专业课,2017武汉理工大学计算机考研专业课真题
- Linux系统编程之进程间通信(IPC)