首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

sass @import不适用于以下划线开头的外部文件

Sass的@import指令用于导入外部的Sass文件,以便在当前文件中使用其中定义的样式。然而,@import指令不适用于以下划线开头的外部文件。

以下划线开头的外部文件是指以"_"开头命名的Sass文件,例如"_variables.scss"。这种命名约定通常用于存放一些可重用的样式或者混合器,这些文件不会被直接编译成CSS文件,而是在其他Sass文件中通过@import导入使用。

当使用@import导入外部文件时,Sass会检查导入的文件名是否以"_"开头,如果是,则默认认为这是一个局部文件,不会单独编译成CSS文件。这样做的目的是为了避免将这些局部文件编译成独立的CSS文件,而只将它们的样式合并到其他Sass文件中。

因此,如果你想要导入一个以"_"开头的外部文件,你需要手动在@import指令中加上文件的扩展名,例如@import "_variables.scss"。这样做可以告诉Sass明确地将这个文件作为一个外部文件导入,并将其样式合并到当前文件中。

需要注意的是,Sass的新版本已经不推荐使用@import指令,而是推荐使用@use和@forward指令来导入和导出样式。这些新的指令提供了更好的模块化支持和更灵活的样式组织方式。因此,在实际开发中,建议使用@use和@forward指令来代替@import指令。

腾讯云相关产品和产品介绍链接地址:

  • 云服务器(CVM):提供可扩展的云服务器实例,满足不同规模和需求的应用场景。详情请参考:https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版:提供高性能、可扩展的云数据库服务,适用于各种规模的应用。详情请参考:https://cloud.tencent.com/product/cdb_mysql
  • 云存储(COS):提供安全可靠、高扩展性的云存储服务,适用于存储和处理各种类型的数据。详情请参考:https://cloud.tencent.com/product/cos
  • 人工智能平台(AI Lab):提供丰富的人工智能服务和工具,帮助开发者构建智能化应用。详情请参考:https://cloud.tencent.com/product/ai
  • 物联网开发平台(IoT Explorer):提供全面的物联网解决方案,帮助开发者快速构建和管理物联网设备。详情请参考:https://cloud.tencent.com/product/iotexplorer
  • 腾讯云区块链服务(Tencent Blockchain):提供安全可信赖的区块链服务,帮助企业构建和管理区块链应用。详情请参考:https://cloud.tencent.com/product/tbc
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

SASS 和 LESS 区别

1、编译环境不同 SASS 安装需要 Ruby 环境,是在服务端处理; LESS 需要引入 less.js 来处理代码输出 CSS 到浏览器,也可以在开发环节使用 LESS,然后编译成 CSS 文件直接使用...... } @else{   ... } 5、引用外部 CSS 文件 scss 引用外部文件命名必须以_开头, 如下例所示: // 源代码: @import "_test1.scss"; @import..."_test2.scss"; // 编译后: h1{   font-size:17px; } h2{   font-size:17px; } 其中_test1.scss、_test2.scss文件分别设置...文件名如果以下划线_开头的话,Sass会认为该文件是一个引用文件,不会将其编译为css文件....而 Less 引用外部文件和 css 中 @import 没什么区别 6、工具库不同 Sass 有工具库 Compass, 在其基础上封装了一系列有用模块和模板,补充强化了Sass功能; Less

1.7K10

CSS预处理器之Sass

引子 ① VsCode 集成 Sass ✅ 1.1 安装 Live Sass Compiler 插件 Live Sass Compiler 是一个用于实时编译和自动刷新 SCSS 文件 VS Code....header { --background-color: #f2f2f2; } 4.2 Sass 变量定义 定义规则 变量以 $ 开头,后跟变量名 变量名是不以数字开头可包含字母、数字、下划线、...$border-color; 5.3 注意事项 如下几种方式将不会导入任何 Sass 文件 文件拓展名是 .css @import "public.css"; 文件名是以 http:// 开头 @import...and (orientation:landscape); 5.4 局部文件概念 如果不希望 _public.scss 文件Sass 检测到并编译成 CSS,可以将文件名改为以 下划线 开头形式...当你在其他 Sass 文件中使用 @import 导入 _public.scss 文件时,只会将其中变量和混合器等内容引入到当前文件中,而不会生成额外 CSS 输出。

16410
  • sass 基础——回顾

    文件   使用sass@import规则并不需要指明被导入文件全名。   ...你可以省略.sass或.scss文件后缀   举例来说,@import"sidebar";这条命令将把sidebar.scss   文件中所有样式添加到当前样式表中   当你@import一个局部文件时...,还可以不写文件全名,   即省略文件开头划线 举例来说,你想导入   themes/_night-sky.scss这个局部文件变量,   你只需在样式表中写@import "themes/...导入     由于sass 兼容原生css 所以它支持原生css@import       ● 被导入文件名字以.css结尾;       ● 被导入文件名字是一个URL地址(比如http...6.静默注释   sass 另外提供了一种不同于css 注释。它以 // 开头,注释内容直到末行。

    1.1K70

    React 设计模式 0x4:样式

    # 外部/引用 CSS 外部 CSS 是网站或 Web 应用程序样式化一种方式,它在文件中编写所有样式,并在应用程序或组件内引用它。...(继承) Nesting(嵌套) 可以通过以下方式安装 Sass: npm install sass 使用: /* example.scss */ .example { color: red;...块(block): 用于描述,通常由类表示 在第一眼看上去就告诉我们该类表示什么 块(block)有以下规则 块可以嵌套 可以有任意数量嵌套级别...元素(element) 用于描述块一部分,通常由类表示 元素与块之间使用双下划线 __ 连接 修饰符(modifier) 用于描述块或元素外观、状态或行为 修饰符与块或元素之间使用双中划线 -- 或 单下划线 _ 连接 <div className="form

    1.3K20

    SassScss、Less 是什么?

    Sass 有工具库 Compass, 简单说,Sass 和 Compass 关系类似于像 Javascript 和 jQuery 关系,Compass 在 Sass 基础上,封装了一系列有用模块和模板...Less 有 UI 组件库 Bootstrap,Bootstrap 是 web 前端开发中一个比较有名前端 UI 组件库,Bootstrap 样式文件部分源码就是采用 Less 语法编写。...,选择符定义不换行,文件最小,一般用于生产版本。...:20px;margin:20px}.one{background:red}.two{background:ye..........5、引入外部 CSS 文件方法命名有一点不一样引入外部 CSS 文件scss...引用外部文件命名必须以_开头,如下例所示:其中_test1.scss 文件名如果以下划线开头的话,Sass 会认为该文件是一个引用文件,不会将其编译为 css 文件

    1.1K60

    解读bootstrap v4 sass设计

    ,只从整体架构上分析 一起走进bootstrap v4 sass 1、bootstrapsass文件都放在scss目录,为什么名字是scss而不是sass呢?...具体可参考sass 语法 2、scss文件分为两种,一种是以下划线开头的如_variables.scss,一种是没有下划线的如bootstrap.scss,这两个区别是前者表示被导入文件,默认不会编译成对应...所以如果有两个文件_a.scss,b.scss默认编译结果是只有b.css文件,如果b要使用_a.scss中样式,那么可以使用导入功能@import a(导入文件是可以省略下划线文件后缀名)。...代码如下: @charset "UTF-8"; // 导入文件 @import "custom-variables"; @import "custom-mixin"; @import "bootstrap.../bootstrap"; 当然如果有代码洁癖,那对于不用样式总是想砍掉,于是重新拿起bootstrap.scss审视,把那些不需要样式,直接去掉import不就好了吗。

    2.9K00

    解读bootstrap v4 sass设计

    ,只从整体架构上分析 一起走进bootstrap v4 sass 1、bootstrapsass文件都放在scss目录,为什么名字是scss而不是sass呢?...具体可参考sass 语法 2、scss文件分为两种,一种是以下划线开头的如_variables.scss,一种是没有下划线的如bootstrap.scss,这两个区别是前者表示被导入文件,默认不会编译成对应...所以如果有两个文件_a.scss,b.scss默认编译结果是只有b.css文件,如果b要使用_a.scss中样式,那么可以使用导入功能@import a(导入文件是可以省略下划线文件后缀名)。...代码如下: @charset "UTF-8"; // 导入文件 @import "custom-variables"; @import "custom-mixin"; @import "bootstrap.../bootstrap"; 当然如果有代码洁癖,那对于不用样式总是想砍掉,于是重新拿起bootstrap.scss审视,把那些不需要样式,直接去掉import不就好了吗。

    2.3K10

    Sass 基础(八)

    @import         Sass 扩展了CSS @import 规则,让它能够引入 SCSS 和 Sass         文件。...默认情况下,它会寻找 Sass 文件并         直接引入, 但是,在少数几种情况下,它会被编译成 CSS @import 规则:         如果文件扩展名师 .css         ...如果文件名以 http:// 开头         如果文件名师url().         ...然后,你就可以像往常一样引入这个文件了,而且还可以省略掉文       如果你有一个 SCSS 或 Sass 文件需要引入, 但是你又不希望它被件名前面的下划线。       ...注意,在同一个目录不能同时存在带下划线和不带下划线同名文件。 例如, _colors.scss 不能与 colors.scss 并存。

    97590

    手把手教你使用scss

    这时我们之前安装Live Sass Compiler插件就派上用场了 我们可以通过点击状态栏上“Watch Sass”,就可以进行对我们SCSS文件编译。...局部文件允许你将一个大样式表分割成多个小文件,以便更好地管理和维护代码。局部文件文件名通常以一个下划线开头(例如 _partial.scss),并具有.scss扩展名。...它们包含了可以使用 @import 指令包含和组合到主SCSS文件CSS代码段。 下面是SCSS中局部文件工作方式: 创建局部文件:局部文件用于保存样式特定部分,例如排版、颜色、布局等。...要创建局部文件,给它起一个以下划线开头并以.scss结尾名称,例如 _variable.scss。 在局部文件中定义样式:在局部文件中,我们可以像在常规SCSS文件中一样定义样式。...例如,_variables.scss 可能包含与颜色和字体相关样式: 导入局部文件: 要将局部文件样式包含到主SCSS文件中,你可以使用 @import 指令,不需要包含下划线和扩展名。

    70621

    Sass速通(二):嵌套与作用域

    @import @import 是 CSS2 原生支持指令,由于 CSS 只有在执行到这条指令时,才会去加载对应文件,这样会导致页面闪烁和加载变慢,所以平时并不常用。...如果资源是作为专被引用公共资源,规范命名方法是在名称前加下划线。...以下几种情况,Sass 会将 @import 编译为原生 CSS 指令: 资源文件后缀为 .css 资源以 URL 地址形式导入 资源以 CSS url() 方法导入 @media @media...是 CSS 原生支持指令,用于查询设备媒体,以便做响应式布局。...Sass 对 @media 做了一些改进,允许我们在嵌套过程中书写媒体查询和响应代码。在编译时, Sass 会把媒体查询编译到文件最外层,并为子选择器加上父选择器前缀。

    1.6K20

    SCSS 迷你书 (下) - SCSS 中 @指令

    @import指令 SCSS@import是css加强版本,共有以下几种方式可以互相导入引用; 注意点 - 可以使用相对路径 - 导入文件可以.scss后缀名 - 可以引入线上...scss文件 - 支持括入引入写法 - 在同一个目录不能同时存在带下划线和不带下划线同名文件。...- 支持引入带下划线和不带下划线文件;比如(navbar和_navbar) - 若是文件命名**带下划线**则不编译该文件,但却可以正常把样式导入其他文件用(如index.scss引入_...navbar,只产生index.css) - 若是文件命名*不带下划线**,两者皆会编译,产生CSS文件((如index.scss引入navbar,会产生index.css和navbar.css...{ @import "widget"; } sass @media 指令和 CSS 使用规则一样简单,但它有另外一个功能,可以嵌套在 CSS 规则中。

    12710

    如何更优雅编写CSS代码

    你可以通过使用前置下划线命名文件来创建分块文件:_animations.scss、_variables.scss等。至于导入,我们使用 @import 指令。...此文件包含用于构建页面所需组件,如:buttons、forms、swipers、popups等等。 layout: 用于布局页面的不同部分。...是的,这一切看起来很厉害,但你可能会想,这种架构适合大型项目,但不适用于小项目。所以,这里还有一个适合较小项目的版本。 首先,您不需要 vendors 文件夹。...你只需将所有的外部 css 依赖放到头部链接标签中。然后,你可以跳过主题文件夹,因为你 app 可能只有一个主题。最后,你页面也不会有很多特定样式,所以你也可以跳过那个文件夹。...--output-style: 指定编译出 css 文件存放位置,它可以是以下值之一:nested|expanded|compact|compressed,我们将使用它来构建你 css 文件

    1.9K10

    SCSS 学习笔记 和 vscode下载live sass compiler插件配置

    ($)开头,后面跟变量名; 变量名是不以数字开头可包含字母、数字、下划线、横线(连接符); 写法同css,即变量名和值之间用冒号(:)分隔; 变量一定要先定义,后使用; 2.3.2.2 连接符与下划线...@import 功能,允许其导入 SCSS 或 SASS 文件。...如果不想局部文件被编译,文件名可以以下划线 (_)开头,如下图 public 最好前面添加 “_” 开头,这样就不会导出 css 文件,如 _test.scss 文件,因为我们只是单纯引入,不需要 css...,一个带),添加下划线文件将会被忽略。...2.4.1.2 跟我们普通css里面@import区别 如下几种方式,都将作为普通 CSS 语句,不会导入任何 SCSS 文件 文件拓展名是 .css; 文件名以 http:// 开头

    51710

    vue项目前端规范

    编码规范 指令规范 Props 规范 CSS 规范 SASS 规范 特殊规范 # 命名规范 普通变量 方法:驼峰命名 规范 跟需求内容相关 复数时候需要加s 常量 方法:全部大写 规范:使用大写字母和下划线来组合命名...只有一个文件情况下不会出现文件夹,而是直接放在 views 目录下面,如 index.vue 尽量是名词,且使用驼峰命名法 开头单词就是所属模块名字(workbenchIndex、workbenchList...循环变量可以简写,比如:i,j,k 等 # 目录文件夹及子文件规范 以下统一管理处均对应相应模块 以下全局文件文件均以 index.js 导出,并在 main.js 中导入 以下临时文件,在使用后,接口已经有了...图标,全局资源 |-- datas 模拟数据,临时存放 |-- lib 外部引用插件存放及修改文件...用 Sass 上下文媒体查询 子选择器作为最后部分 .product-teaser { // 1.

    2.6K54

    从element-ui源码来看BEM实现

    BEM代表“块(block),元素(element),修饰符(modifier)”,开发组件过程中经常使用这三个实体,而在选择器中,这三个实体由以下符号来表示扩展关系: - 中划线:仅作为连字符使用...__ 双下划线:双下划线用来连接块和块子元素。 _ 单下划线:单下划线用来描述一个块或者块子元素一种状态。...我在element组件库中mixins.scss文件中找到了想要答案。 接下来我要讲就是如何利用sass,编写具有可读性和可维护性BEM规则css代码。...#{$B} { @content; } } 为了方便大家理解代码,我现在开头贴上配置文件中定义变量,而这时就能很清楚看到block生成就是基于BEM规范中,块是设计或布局一部分,具有唯一地意义...贴一段示例代码,如何利用上面的代码编写BEM规范css代码: @import "mixins/mixins"; @import "common/var"; @include b(test) {

    1.9K30

    sass入门学习篇(二)

    从语法开始但是语法也不是一两句事情,首先看基本导入,使用 一,sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号;另一种就是我们这里使用scss文件,建议scss....二,导入 使用@import导入但是和css导入有点区别。...比如基础文件命名:_mixin.scss导入时候可以省略下划线写成:@import "mixin" 三,注释 sass有两种注释方式,一种是标准css注释方式/* */, 另一种则是//双斜杆形式单行注释...四,变量,必须是以$开头,!default表示默认值,sass是没有局部变量 1,普通变量 $f:12px; body{font-size:$f;} 2,默认变量 $f:12px !...5,多值变量,有两种:list类型和map类型,简单来说list类型有点像js中数组,而map类型有点像js中对象。

    52020

    09-移动端开发教程-Sass入门

    Sass变量和注释 5.1 定义变量及使用 Sass变量必须是$开头,后面紧跟变量名,而变量值和变量名之间就需要使用冒号(:)分隔开(就像CSS属性设置一样)。...混合指令 (Mixin Directives) 9.1 不带参数简单Mixin 混合指令(Mixin)用于定义可重复使用样式,可以直接把一整段Sass代码替换到某个地方去。...导入文件 Sass导入( @import)Sass文件规则和CSS有所不同,编译时会将 @importscss文件合并进来只生成一个CSS文件。...但是如果你在Sass文件中导入css文件如 @import 'reset.css',那效果跟普通CSS导入样式文件一样,导入css文件不会合并到编译后文件中,而是以 @import方式存在。...所有的Sass导入文件都可以忽略后缀名 .scss。一般来说基础文件命名方法以_开头,如 _mixin.scss。这种文件在导入时候可以不写下划线,可写成 @import "mixin"。

    1.8K60
    领券