Sass混入变量内部属性
是指在Sass中，可以在混入（Mixin）中定义变量，并在混入内部使用这些变量来设置属性的值。这样可以使代码更加模块化和可重用。
Sass是一种CSS预处理器，它扩展了CSS的功能，提供了变量、嵌套、混入、继承等特性，使得CSS的编写更加高效和灵活。
混入（Mixin）是Sass中的一种特性，它允许我们定义一组CSS属性集合，并在需要的地方引用这个集合。通过使用混入，我们可以避免重复编写相同的CSS代码，提高代码的可维护性和复用性。
在混入中，我们可以定义变量，并在混入内部使用这些变量来设置属性的值。这样，当我们需要修改这些属性时，只需要修改变量的值，而不需要逐个修改每个属性的值，从而提高了代码的可维护性。
Sass混入变量内部属性的优势包括：
- 模块化和可重用：通过使用混入，可以将一组CSS属性集合封装成一个模块，可以在需要的地方引用这个模块，提高代码的可重用性。
- 提高代码的可维护性：通过使用变量，可以集中管理属性的值，当需要修改属性时，只需要修改变量的值，而不需要逐个修改每个属性的值，减少了代码的冗余和错误。
- 灵活性：通过使用混入和变量，可以根据不同的需求生成不同的CSS样式，提供了更多的灵活性。
Sass混入变量内部属性的应用场景包括：
- 定义通用的样式集合：可以将一组通用的样式属性封装成一个混入，然后在需要的地方引用这个混入，提高代码的复用性。
- 定义主题样式：可以根据不同的主题定义不同的样式集合，通过切换主题来改变页面的样式。
- 定义响应式样式：可以根据不同的屏幕尺寸定义不同的样式集合，实现响应式布局。
腾讯云相关产品中与Sass混入变量内部属性相关的产品是腾讯云CSS（Cloud Style Sheets），它是一种云端样式表服务，提供了基于云端的样式管理和样式共享功能，可以帮助开发者更好地管理和共享样式。
腾讯云CSS产品介绍链接地址：https://cloud.tencent.com/product/css
相关·内容
我有一个Angular项目，它使用Sass进行CSS处理，我正在考虑Tailwind。我想把Tailwind导入到不同的组件Sass文件中，这样我就可以扩展它们了，但是我看到当我两次导入同一个文件时，它在Angular生成的文件中出现了两次。 有没有可以避免重复的组织方式或方法？还是我想错了问题？
浏览 45提问于2019-01-29得票数 0
有没有更快的方法在Sass中编写相同的样式结果？
例如，不使用Sass：
bottom: auto;
left: auto;
right: auto;
top: auto;
使用sass
bottom,
left,
right,
top {
auto;
}
浏览 1提问于2016-07-19得票数 0
我有一个混入声明，或多或少如下
@mixin color-background {
background: yellow;
}
我想用这个颜色作为png的背景。但是我似乎不能把这两者混在一起
现在我想做的是举个例子
.myImageWithBackgroundColor{
background: url(image.png),@include color-background
}
我怎样才能用SASS和mixin达到这个目的呢？
浏览 0提问于2017-07-18得票数 0
回答已采纳
因此，在susy2中非常有用的“图库”混合使用了第n个子选择器，这在IE8中是不起作用的。那么有什么好的变通办法呢？
我在考虑扩展图库混入并添加特定于IE8的样式。对susy来说这可能吗？
以下是我的sass代码，如果有帮助的话：
.grid_gallery li.slide {
@include gallery(12 of 24); //2 across
margin-bottom: gutter(24);
@include breakpoint(600px) {
@include gallery(6 of 24); //4 across
}
@include b
浏览 3提问于2014-07-09得票数 0
4回答
假设我有两个几乎相同的超文本标记语言结构，但具有不同的class名称。它们只有几个变量不同，比如width和height。通过使用SASS/SCSS变量，我认为我可以这样做：
.widget-a {
$width: 50px;
}
.widget-b {
$width: 100px;
}
.widget-a,
.widget-b {
button {
background: red;
width: $width;
}
}
这将允许我为widget a和b编写一段SASS嵌套代码。然而，变量仅在嵌套范围内可见，因此SASS返回‘
浏览 0提问于2011-12-05得票数 2
1回答
我想知道是否有一种方法可以通过特定变量的值来包含一个混合(指南针或我自己的)。
目前我有以下的混入(它可以工作)
@mixin aligned-top-bottom-border($size, $side){
@if $side == "left"{
@include border-top-left-radius($size);
@include border-bottom-left-radius($size);
}
@else{
@include border-top-right-radius($size);
@include bord
浏览 1提问于2014-10-05得票数 0
我有一个生成选择器名称的sass混入：
@mixin rocks($name){
#{$name}-rocks {
@content;
}
}
通过调用mixin调用：
@include rocks(dave){
color: red;
}
我想创建一个自定义函数来为我调用这个混入，以将语法简化为：
rocks(dave){
color: red;
}
是否可以在选择器之外调用sass @函数？2.从其中调用混入？大致是这样的：
@function rocks($name){
@include @rocks($name)
}
如果可能的话，我更喜欢自定义的sass函
浏览 0提问于2014-08-30得票数 1
当我开始一个新的设计项目时，我从我现有的样板开始，即sass(partials/mixins，partials/reset，partials/variables)等。
问题是，如果我在当前项目中向mixins.scss添加新的mixin，要在旧项目中使用新的mixin，我必须在该项目的旧mixin.scss中手动复制新的mixin。
我有几个项目，如上所述更新mixins变得令人头疼。
我想要的是管理一个集中的混入文件，所有的项目(新的和旧的)都可以从一个集中的远程存储库(在github中)拉入。
一个跨所有项目的SASS混入文件，以便更容易地添加混入并在旧项目中使用它
是否可以使用当前版本的
浏览 0提问于2017-05-26得票数 1
当我尝试使用compass进行编译时，我得到了一个错误，声明“混入可能不是在控制指令或其他混入中定义的”。
下面是我使用的代码
@mixin fn-menu {
$triangle-height: 8px;
$triangle-width: 16px;
@mixin menu-marker-inner($pos: top) {
$size: 12px;
$offset-height: $triangle-height;
.......
在谷歌搜索时，我发现嵌套的Mixins不受支持。然而，这个页面的说
**Smaller Improv
浏览 2提问于2013-11-07得票数 1
3回答
我正在尝试安装bootstrap-sass，并得到下面的错误。我试过旧版本的sass，但bundler一直在安装3.3.0。
WARN: Unresolved specs during Gem::Specification.reset:
sass (~> 3.2)
WARN: Clearing out unresolved specs.
Please report a bug if this causes problems.
/Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_pa
浏览 0提问于2014-03-11得票数 6
回答已采纳
1回答
有没有办法重新定义SASS mixins。我想要覆盖特定于站点的样式需求的SASS混合。有办法做到这一点吗？
浏览 2提问于2010-05-31得票数 1
回答已采纳
当我尝试运行parcel时，我看到了这个错误：
@parcel/transformer-sass: Undefined mixin.
ℹ Server running at http://localhost:1234
× Build failed.
@parcel/transformer-sass: Undefined mixin.
╷
53 │ @include button-variant($background, $border);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
srcst
浏览 19提问于2021-03-09得票数 0
我在根目录中已经有一个包含以下内容的config.rb：
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"
# generated_images_dir = "/im
浏览 0提问于2014-02-05得票数 1
例如，我有这样的HTML： <div class="header__container">
<div class="header__info-row">
<section class="social__col">
</section>
<section class="contact__col">
</section>
</div>
</d
浏览 20提问于2019-05-09得票数 1
9回答
SASS有Compass (一个社区维护的sass混入/方法库)。
LESS有没有可以与Compass相比的支持库？列出任何东西都会很有帮助！
浏览 6提问于2011-05-10得票数 50
回答已采纳
我正在使用rails gem Bootstrap SASS，我想知道如何覆盖一些混入。具体地说，边界半径等。
我想我可以简单地覆盖它，如下所示：
@import "bootstrap";
@import "bootstrap-responsive";
@mixin border-radius($radius: 1px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
浏览 0提问于2012-04-11得票数 3
回答已采纳
3回答
有没有办法给sass变量增加作用域？
我希望能够将类附加到我的body元素。该类将引用一组其他样式表可以访问的颜色。
我试过了：
@mixin theme_one{
$color: #000;
}
.theme_one{
@include theme_one;
}
和
.theme_one{
$color: #000;
}
浏览 4提问于2012-08-21得票数 1
我正在做一个Rails 4项目，我正在使用Sass和Sass的@import将多个css组合成一个css。它工作得很好，但如果我使用一个新的partial for mixins (_mixins.css.scss)，并仅在main.css.scss中@import this，并使用在该_webapp.css.scss之后添加的任何其他文件的mixins
@import "bootstrap/bootstrap";
@import "responsive/mega_menu";
@import "responsive/mixins&
浏览 9提问于2014-09-23得票数 1
我想在SASS中创建一个函数来生成不同的类。像这样的东西
@function test($class-name) {
@for $i from 1 through $tot-class {
.#{$class-name}-#{$i} {
//some rules
}
}
}
但是我不知道如何调用这个函数。我试过了
@test(red);
或
test(red);
但它似乎不起作用。哪种方式是正确的？
浏览 0提问于2012-09-07得票数 1
回答已采纳
1回答
编译时删除混入
、、、、
我已经对此做了一些研究，到目前为止还没有想出任何东西(也许这就是我的答案)，但我想我应该在这里联系一下，看看是否有人可能对此有所了解。
我在一个项目中使用Sass作为我的样式表，我想知道是否有一种方法可以编译所有东西两次:一次使用所有的混合，第二次不使用某个混合。在本例中，我很想省略的是我编写的用于处理某些断点处的媒体查询的mixin，我在整个样式表中的不同位置使用它来将所有相关样式捆绑在一起，而不是放在单独的“响应式”样式表中。然而，我想通过删除所有响应式样式来测试某些东西，因此我希望删除一个集合中的样式，并将它们保留在另一个集合中，以便能够根据需要来回切换。
例如，我可能对页面标题有一些样
浏览 0提问于2014-03-21得票数 1
2回答
假设我有一个使用sass变量的现有代码库。
$sw-primary-1: #ccc;
这些类在各地都被使用，即
.lifecycle {
&.new {
background-color: $sw-primary-1:
}
}
}
有没有什么我可以做的，像这样一个大型的现有代码库，我知道想要根据身体上的不同类来改变这个调色板变量。
即body class="redesign"
我基本上想去的地方
.redesign {
$sw-primary-1: blue;
}
但是上面的方法不起作用，它仍然坚持使用原始的sass可变颜色。
浏览 0提问于2018-09-04得票数 0
2回答
我正在使用最新版本的Angular-CLI创建一个Angular2项目。我有一个sass文件，其中的变量位于src/sass/style/_vars.scss中。是否可以配置sass编译器，使我只需编写
@import "vars";
而不是写出完整路径或相对路径？
浏览 0提问于2017-01-06得票数 8
3回答
有没有一种方法可以将CSS值直接赋值给SASS变量，如下所示：
$var:padding: 20px/1440px * 100%;
我知道我能做到：
$padding: 20px/1440px * 100%;
padding: $padding;
但是，有没有一种方法可以直接将CSS中的值赋给变量呢？基本上把它放在同一条线上。
浏览 4提问于2014-06-23得票数 3
1回答
我有这个来自基础6 _buttons.scss`源文件的默认SASS混合(实际上只是其中的一部分)：
/// Margin around buttons.
/// @type List
$button-margin: 0 0 $global-margin 0 !default;
@mixin button-base {
@include disable-mouse-outline;
display: inline-block;
vertical-align: middle;
margin: $button-margin;
}
如您所见，没有直接附加到它的参数：
@mixin
浏览 0提问于2017-05-03得票数 0
1回答
以下Sass：
@mixin colourCount
.one
background: rgba(0, 160, 0, 0.5)
.two
background: rgba(255, 255, 0, 0.6)
.count
@include colourCount
.cost
@include colourCount
生成CSS：
.count .one {
background: rgba(0, 160, 0, 0.5);
}
.count .two {
background: rgba(255, 255, 0, 0.6);
}
.cost .o
浏览 0提问于2013-06-11得票数 0
回答已采纳
1回答
有一个非常奇怪的断点问题。
Screen.scss包含最基本的断点示例：
@import "breakpoint";
$high-tide: 500px;
.johnny-utah {
color: blue;
@include breakpoint($high-tide) {
content: 'Whoa.';
}
}
这将被编译为：
.johnny-utah {
color: blue;
}
似乎断点没有返回任何东西。它以前是有效的。
在OS X.10上运行的Compass 1.0.1
浏览 14提问于2014-09-06得票数 0
我想部署我的应用程序与特使，以确保将有零停机时间。经过一些研究，我发现这个脚本就是我想要的。
基本上，对于后端，一切都运行得很好。我能够克隆项目，执行所有命令并将其指向最新的项目。在那之后，我为我的vue组件为npm添加了一个新任务。这就是我们的任务
@task('deployment_assets')
echo 'Running npm'
cd {{ $release }}
sudo npm ci --production
sudo npm audit fix --only=prod
sudo npm run prod
@endt
浏览 6提问于2021-11-10得票数 0
我正在为一个网站设置一个CSS，其中所有的链接，在:hover状态下，都比正常状态下更暗。
我使用的是Sass/Compass，所以我使用了darken Sass方法，如下所示：
它的用法如下：darken($color, $amount)
我的问题是:如何“自动”将所有<a>元素设置为暗80%？
我想要做的是(Sass语法)：
a
background: $blue
&:hover
background: darken(this element background-color, 80%)
要做到这一点，最佳解决方案是什么？
浏览 0提问于2014-01-09得票数 25
回答已采纳
1回答
指南针垂直节律不工作
、、、
我在最新版本的compass (0.12.2)和sass (3.1.20)中遇到了一个问题，在这些版本中垂直对齐混合没有生效。当尝试使用compass validate验证生成的css时，它在compass/reset include以及边界半径混合等方面失败。
有问题的scss文件的代码可以在中找到。我在验证时收到的错误是。要查看该网站的外观，请访问。垂直间距应该是1.5x，但它看起来是1x。
基本上，我看不到一些代码。在我升级我的指南针和sass宝石之前，它就起作用了。有人能帮我恢复到全功能的指南针/sass样式表吗？
浏览 0提问于2012-07-27得票数 0
回答已采纳
1回答
我开始学习CSS、HTML和Sass，在了解基础知识的同时，我想开始学习最佳实践。我正在建立一个响应式的投资组合网站(使用骨HTML5样板和Wordpress)，这将有4-5个断点，以及~5个不同的静态网站模板。
我的断点是根据来自多个.scss文件中的代码的媒体查询导入的，如下所示：
_base_res.scss
_481_and_up.scss
_768_and_up.scss
_1030_and_up.scss
现在，我还有一些包含媒体查询的静态页面：
_home.scss
_about.scss
_contact.scss
_work.scss
包含媒体查询和断点css文件的静态页面c
浏览 2提问于2014-11-11得票数 0
我已经通读了SASS文档，并且只能找到如何使用scss语法而不是sass语法来执行媒体查询(sass是一个严格的空白，没有花括号或分号)。如何使用sass语法执行媒体查询？
浏览 1提问于2012-03-26得票数 10
回答已采纳
我正在尝试使用SASS Mixin更改MDC Material Components web布局网格的间距大小，但失败了！
目前我使用的是：
.mdc-layout-grid-cell
{
@include mdc-layout-grid-cell('desktop', 3, 60px);
}
我可以看到混合是used...however的，槽保持不变的大小。
我做错了什么？
浏览 13提问于2018-01-05得票数 1
回答已采纳
5回答
是否有可能在Sass中使用三元条件，特别是在类对象上？看起来像是：
[class*="fa-caret-"]{
&:left ? 'top: -45' : 'top: 45';
}
浏览 2提问于2017-05-18得票数 6
我在我的项目中使用了sass-bootstrap，我有一个_colors.scss文件来保存我的颜色变量。我在导入bootstrap之前导入我的_colors.scss。
我可以修改主引导变量，如下所示：
$navbar-default-link-active-color: red;
//标题菜单中的活动链接变为红色
但是我不能在我的其他sass文件中使用颜色变量，比如：
$brand-primary: #428bca;
body {
color: $brand-primary;
}
// this give undefined variable
怎么会这样呢？
我的导入applicat
浏览 0提问于2014-10-13得票数 0
有没有可能让SASS使用它的元素的背景颜色作为变量在它的函数中使用？ 目前，我在我们的API中生成这些值，并将它们传递下去，但如果这是我可以用SASS做的事情，那会更简单。 @function set-text-color($color) {
@if (lightness( $color) > 40) {
@return black;
}
@else {
@return white;
}
}
.example {
.heading {
font-size: 1.5em;
padding: 1em;
// color:se
浏览 20提问于2019-04-30得票数 0
1回答
考虑一下，我有以下SASS部分：
@import '../modules/cdn';
$font-url: '#{$cdn-base-url}/fonts/MyFont';
@font-face {
font-family: 'MyFont';
src:
url('#{$font-url}-regular.woff2') format('woff2'),
url('#{$font-url}-regular.woff') format('woff')
浏览 10提问于2018-12-17得票数 0
1回答
这是我当前的SASS文件：
$icons-spacing: 12px;
$icons-sprite-dimensions: true;
@import "sprites/icons/*.png";
@include all-icons-sprites;
.odd .chat-marker { background-position: sprite-position($icons, chat-marker-inverted); }
错误：Undefined variable "$icons"
那么精灵贴图的变量是什么呢？顶部的map配置变量可以正常工作。
浏览 0提问于2012-03-25得票数 1
回答已采纳
当你的布局同时适用于rtl和ltr语言时，compass/sass有没有办法帮助最小化重复的css代码？
浏览 0提问于2012-10-24得票数 3
可以将变量与元件的样式标记一起使用吗？基本上，我已经导入了一个混入到我的样式标签，它接受2种颜色来在一个类中创建一个渐变。它工作得很好，但我想要这种动态，这样我就可以通过数据库设置它。我知道我可以通过内联绑定一个样式，但是div的渐变是相当长的，并且作为一个混合效果要好得多。
组件：
<template>
<section class="section" v-bind:class=" { 'color-section' : content.gradient_color_one }">
<d
浏览 0提问于2017-09-01得票数 10
回答已采纳
我想用SASS更改bootstrap的默认主题颜色，问题是当我更改颜色并编译时，它会给出无效的CSS值错误。 我看过YouTube上的文档和教程，但我看不出问题出在哪里 我使用的是bootstrap 5.1.0，sass 3，这是我的scss文件： @import "../../node_modules/bootstrap/scss/variables";
$theme-colors: (
"primary": //some color here,
);
@import "../../node_modules/bootstrap/scss/boot
浏览 42提问于2021-08-24得票数 8
回答已采纳
我有一个基于SCSS的布局，我想在其中使用。
OOCSS模块是纯CSS - ptl，例如，代表padding-top: large，其中large是一个定义的值(默认情况下为20px)。
我想用SCSS来增强它。到目前为止，我已经能够用SCSS变量替换固定值，所以如果我想(我不想)，我可以在一个地方更改这些值：
$spacing-small: 5px;
$spacing-medium: 10px;
$spacing-large: 20px;
...
.pts,.pvs,.pas{padding-top:$spacing-small !important}
现在我希望能够使用ptn、pvs等作为
浏览 3提问于2012-12-17得票数 1
回答已采纳
在Sass中，我不太清楚使用带有mixin的@include和使用带有占位符类的@extend之间的区别。它们不是等同于一件事吗？
浏览 105提问于2013-08-02得票数 95
回答已采纳
1回答
在我的scss代码中，我试图使占位符如下：
%input__label {
color: red;
&_content {
color: blue;
}
}
然后对其进行扩展：
.input__label {
@extend %input__label;
}
当我试图编译该代码时，只有input__label能编译，而input__label_content不能：
.input__label {
color: red;
}
(但例如，使用伪元素-&：：在一切正常之后)为什么这是单调的？我使用node v7.10.1和node
浏览 1提问于2017-08-06得票数 0
回答已采纳
2回答
将一些CSS转换为Sass，例如：
.ptn,
.pvn,
.pan{padding-top:0px !important}
到这个
@mixin ptn {padding-top:0px !important}
@mixin pvn {padding-top:0px !important}
@mixin pan {padding-top:0px !important}
但我希望我能做更多这样的事情
@mixin ptn,
@mixin pvn,
@mixin pan {padding-top:0px !important}
有没有可能这样做呢？
谢谢!
浏览 2提问于2012-02-08得票数 0
回答已采纳
在sass/scss中可能出现类似下面这样的哑例吗？我需要这样的东西来防止在不同设备上无休止的媒体查询。
// The dummy mixin
@mixin iphone_rules($webapp_portrait:null){
@if($webapp_portrait != null){
// Portrait (webapp)
@media screen and (max-height: 460px){
// The following line is just a dummy
eg. echo $webapp_portrait;
浏览 0提问于2013-01-22得票数 5
回答已采纳
我想知道是否有一种方法可以在Compass/Sass中实现以下输出？
$padding: 3em
div {
padding: $padding;
}
@media screen and (max-width: 780px) {
$padding: 2em;
}
/* outputs:
div {
padding: 3em;
}
@media screen and (max-width: 780px) {
div {
padding: 2em;
}
}
*/
有什么方法可以做到这一点吗？基本上是让Sass编译所有属性，当变量
浏览 2提问于2012-02-23得票数 2
回答已采纳
这个sass代码有效吗？
tr:nth-child(odd)
:background-color #cccccc
不知何故，它不会为我的表的交替行着色。
浏览 1提问于2009-06-19得票数 3
回答已采纳
我正在和webpack一起开发一个反应应用程序。我的问题是，我的scss文件要么没有正确编译，要么没有包含在我的开发模式中。但是，在为生产建造之后，这些风格也包括在内。这个问题很令人困惑。请帮帮我。
我在开发配置中处理scss文件的webpack配置如下：
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
},
浏览 3提问于2017-06-13得票数 0
1回答
耶，伙计们！
我尝试为css自定义属性构建一个sass混入，以使工作更容易一些。
我的尝试看起来像这样：
@mixin mixin($value) {
background: unquote('$')#{$value};
background: var(--#{$value}, unquote('$')#{$value});
}
输出如下所示：
.example {
background: $value;
background: var(--colour, $value);
}
但是sass不会将我的$value转换成实际的东西。$value部件
浏览 4提问于2017-08-01得票数 1
2回答
我正在将我们的Rails (3.2.17)应用升级到sass，并且在资产预编译过程中遇到了“未定义的变量”错误。我使用@import在master.scss文件中包含我的代码片段。此设置在本地运行得很好，但在预编译时会出错。避免错误的唯一方法是@import代码段到引用了第一个代码段中定义的混合和变量的代码段中。
例如:我@导入'fonts‘和'buttons’到master.scss中，然后我不得不再次@import 'fonts‘到'buttons’中，因为它使用了'fonts‘中定义的变量。这绕过了预编译错误，但这并不理想，因为应用程序中只加载了一
浏览 3提问于2014-03-15得票数 7
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
