是否可以将一个类或标签别名为SASS或LESS中的另一个类或标签? [英] Is it possible to alias a class or tag to another class or tag in SASS or LESS?
问题描述
我正在尝试使用Less或Sass使bootstrap 2.1标记更具语义.考虑Bootstrap的标准导航栏的以下标记:
I am trying to make my bootstrap 2.1 markup more semantic using Less or possibly Sass. Consider the following markup for Bootstrap's standard navigation bar:
<header id="main-nav" class="navbar navbar-static-top" role="banner">
<nav class="navbar-inner" role="navigation">
<div class="container">
<!-- Collapse nav button -->
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Nav -->
<nav id="navlinks" class="nav-collapse collapse pull-right">
<ul class="nav nav-pills">
<li class="active">@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</nav>
</div>
</nav>
</header>
很显然，将DIV更改为更具语义的HTML 5标签是很容易的，但是从标记中删除类链更加困难.如果您要使用mixin，例如:
Obviously, it is easy to change DIVs to more semantic HTML 5 tags, but removing the chain of classes from the markup is more difficult. If you were to use mixins like:
header #main-nav {
.navbar;
.navbar-static-top;
}
以下定义不起作用，因为复合类不受影响:
The following definition wouldn't work because compound classes are not effected:
.navbar .btn-navbar {
display: none; // hide button in full width (Why a compound class? Redundant?)
}
理想地，如果less或sass具有这样的语法，那将是很好的:
Ideally, it would be nice if less or sass had such a syntax:
header#main-nav $= .navbar; // copy .navbar definitions using #main-nav as the name
或
header#main-nav @= .navbar; // rename .navbar definitions to #main-nav
可以做到吗?如果没有，如何实现语义标记?
Can this be done? If not, how can I achieve semantic markup?
推荐答案
您所说的没有别名，但是LESS和Sass都可以这样写:
There is no aliasing as you say it, but LESS and Sass both have the ability to write like this:
.navbar, #main-nav {
.collapse {}
}
输出如下:
.navbar .collapse, #main-nav .collapse {}
Sass有一个称为@extend的唯一指令，其功能如下:
Sass has a unique directive called @extend, which functions like this:
%common-styles {
.collapse {}
}
.navbar {
// unique navbar styles
@extend %common-styles
}
#main-nav {
// unique main-nav styles
@extend %common-styles
}
在这种简化的情况下，输出将与第一个输出相同，但是允许您以优雅的方式添加其他样式.
The output would be identical to the output of the first for this simplified case, but allows you to add additional styling in an elegant way.
已更新的疑问句:
我非常谨慎地使用类，只是将元素的集合描述为一个整体(这是电影列表吗?是否是有关客户端的信息?是对动作元素的调用吗?)，并让后代选择器处理休息.使用CSS预处理程序时，链类(ala OOPCSS)基本上是不必要的:它可以为您组装样式.
I use classes very sparingly, only to describe the collection of elements as a whole (is it a movie listing? Is it information about a client? Is it a call to action element?) and let descendant selectors take care of the rest. Chained classes (ala OOPCSS) are largely unnecessary when using a CSS Preprocessor: it can assemble styles for you.
在理论上的Sass引导程序中，无论我们设计的站点是什么，我们都可以定义一些我们想重用于导航元素的东西(LESS的语法略有不同，但是它也可以这样做).
In a theoretical Sass bootstrap, we might define a few things we like to reuse for navigation elements no matter what site we are designing (LESS has a slightly different syntax, but it can do this too).
@mixin drop-menu { // intended for use with ordered or unordered lists that contain unordered lists
& > li {
@include inline-menu;
ul { display: none }
&:hover {
ul { display: list }
}
}
}
@mixin inline-menu { // use with ordered or unordered lists if you'd like
display: inline;
margin-right: 1em;
& + li { margin-left: 1em; border-left: 1px solid }
}
@mixin subtle-box { // just a box with a subtle gradient and slightly rounded corners
linear-gradient(white, #CCC);
border-radius: .25em;
padding: .5em;
}
@mixin clearfix {
&:after {
content: " ";
display: table;
clear: both;
}
}
在您要求成为CSS之前，这些项目都不是CSS的一部分.
None of these items are part of your CSS until you ask them to be.
body > header nav { // this is our main navigation element
@include drop-menu;
@include subtle-box;
color: blue;
font-family: garamond, serif
}
nav.admin {
@include inline-menu;
color: orange;
}
section.gallery {
@include clearfix;
img { float: left; padding: 0 10px 10px 0 }
}
现在，如果您有多个非常不同的元素，但是有很多相同的样式，请务必使用原始答案中提到的@extend指令.
Now if you have multiple elements that are very different but have a good chunk of styling in common, by all means use the @extend directive mentioned in the original answer.
如果您要在Sass和LESS之间做出选择，那么Sass具有更多的功能(例如非常酷的@extend指令，函数，列表等).我最初选择LESS的原因是它具有一个不错的第三方Windows编译器，因此我不必在虚拟机上安装Ruby，而是一直反对该语言(这些变量变量毫无用处！).
If you're deciding between Sass and LESS, Sass has considerably more features (like the really cool @extend directive, functions, lists, etc.). I initially chose LESS because it had a nice 3rd party Windows compiler so I didn't have to install Ruby on my virtual box, but fought against the language constantly (these variable variables are useless!).
这篇关于是否可以将一个类或标签别名为SASS或LESS中的另一个类或标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
