文档建议反馈控制台
首页
学习
活动
专区
工具
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
相关搜索:@import 'X‘媒体查询表达式必须以'(’开头，对于带有gatsby的sass文件没有意义MV命令不适用于以引号开头的文件名不在以下划线开头的文件夹中的文件的节点全局模式在apache spark中访问以下划线开头的文件Minio Kubernetes Intstallation无内存错误如何将replication_pad2d层作为torch_op实现到coremltools转换器For循环不会抓取所有项，只需要一个如何对“X-Y”字符串数据进行自然排序，先按X，再按Y？删除任何列表为空的集群React本机TypeError:导航未定义
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

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.6K10

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 输出。

14310

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、bootstrap的sass文件都放在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、bootstrap的sass文件都放在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 并存。

96790

手把手教你使用scss

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

58520

Sass速通（二）：嵌套与作用域

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

1.5K20

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 规则中。

10610

如何更优雅的编写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:// 开头；

42910

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中的对象。

51220

多网站项目的 CSS 架构

我在互联网行业的第四份工作，是在我国一家领先的媒体新闻公司中任职一名 CSS/HTML 专家，我的主要职责就是开发可重用的、可扩展的、用于多网站的 CSS 架构。 ?...基础层要保持轻量，其中只包含 CSS 初始化、基本的 SASS mixins、通用图标、通用字体（如需）以及功能类，如果某些网格布局适用于所有网站，就将其作为通用网格添加到基础层中。...layer-name.scss 文件： @import "config"; @import "local"; 另外一个我们要给自己定下的原则就是，尽可能把每个文件都拆分成尽可能小的部分（小文件）。...对于不会被编译成单独文件的私有文件，我们用一个下划线（ _）作为其文件名的前缀。这里的下划线代表着此文件不能单独存在。 注意：当导入私有文件时，我们书写其文件名时可以不必带上前缀下划线。...以下为 inherited-project/_config.scss 的一个例子： /*加载 base-layer 配置信息 */ @import "..

1.6K30
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券