I have a doub in less (sorry am very novice).
the next code can be posible? I mean, exist a way to do something like this?
#var01: {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.my_style {
#var01;
color: red;
}
I want save a class into a varible, and later use it.
is posible?
thanks!!!
The feature you are looking for is mixins:
.foo {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.my_style {
.foo();
color: red;
}
Related
As mentioned here it's possible to set properties based on e.g a class on a parent element.
I've tried it a while without luck to specify the color of a paragraph based on the sections background containing the paragraph to have all style definitions in the file for that paragraph to keep it atomic.
If I looked into the compiled CSS and saw something happens. I guess my filestructure broke things here because I created a lot of files and included them on the levels where these were needed.
Here's what I did:
// Main.scss
html{
body{
#wrapper{
#import "areas/section";
}
}
}
// _section.scss
section{
width:100%;
height:100%;
&.black{
background-color:#000;
}
&.white{
background-color:#fff;
}
#import "paragraph";
}
// paragraph.scss
p{
section.black &{
color:#fff;
}
section.white &{
color:#000;
}
}
And the generated outout looks like this:
section.white html body div#wrapper section p {
color: #000;
}
And I expect an output like this:
html body div#wrapper section.white p {
color: #000;
}
Is that possible or is my interpretation completely wrong?
The parent selector isn't a reference to the next level up, but the entire composed selector after all imports/extends/mixin calls are resolved.
.one {
.two {
.three & {
color: red;
}
}
}
The output will be this:
.three .one .two {
color: red;
}
In this example, & is equal to .one .two, not .two. It doesn't matter what method you use to nest your rules (extending, importing, or using mixins), the result is still the same.
I've been unable to wrap my head around how to execute this idea I have using pseudo classes with variables in Sass.
My case
I'm creating a form which has several input[type=text]fields and an input[type=email] field and for those fields I want to create the normal, hover and focus states.
So the compiled CSS would look like this:
input[type=text],
input[type=email] { background:#eee; }
input[type=text]:hover,
input[type=email]:hover { background:#aaa; }
input[type=text]:focus,
input[type=email]:focus { background:#666; }
So I created this variable:
$inputs: "input[type=text], input[type=email]";
And for the normal state I have:
#{$inputs} { background:#eee; }
So in my naive mind I thought that doing #{$inputs}:hover { background:#aaa; } would work... but it doesn't, of course, Sass can't just "guess" what I want just like that :p
Which is why I'm here.
Question
Any suggestions on how I can use pseudo classes on variables like I describe above?
Any help and guidance would be greatly appreciated.
Thanks.
I'd go for this:
input[type=text],
input[type=email]
{
background:#eee;
&:hover
{
background:#aaa;
}
&:focus
{
background:#666;
}
}
Here is demo fiddle: http://jsfiddle.net/ApxSB/
As #ricardozea said, you may also put the selectors in a variable like this:
$inputs: "input[type=text], input[type=email]";
#{$inputs}
{
}
Demo here: http://jsfiddle.net/NicoO/ApxSB/1/
Friends,
can i use css as a nested functions and how to get the current css properties of element like as follow
.button1:active
{
#button2
{
width:width+20px;
}
}
Not with standard CSS.
You can do.
.button1:active #button2 {
width:20px;
}
However you can in LESS, SASS or SCSS.
With LESS you could do.
#elementWidth: 20px;
.button1:active {
#button2 {
width: #elementWidth + 20px; //Resulting width would be 40px
}
}
You can write like:
.button1:active #button2{
width:20px;
}
Use CSS pre-processors LESS or SASS to achieve this.
I've been trying like a mad man to get the following LESS statement to work, but now i am fearing that it's not gonna happen :/ So I am turning now to you guys in the end for help!
I have the following statement:
.top{
&-first{
background:black;
&-item{
color:white;
}
}
&-second{
background:green;
&-item:extend(.top-first-item){}
}
}
I was hoping for to achive the following output:
.top-first {
background: black;
}
.top-first-item,
.top-second-item{
color: white;
}
.top-second {
background: green;
}
But unfortunately it does not compile that but this instead:
.top-first {
background: black;
}
.top-first-item{
color: white;
}
.top-second {
background: green;
}
LESS currently does not support extending a "concatenated name" selectors (basically, .top &-first &-item is interpreted as three distinct selector elements and never found by extend looking for a single selector).
A workaround for your particular case:
.top {
&-first {
background: black;
}
&-second {
background: green;
}
&-first, &-second {
&-item {
color: white;
}
}
}
Another option is to break the designations into separate classes:
LESS
.top{
&.first{
background:black;
&.item{
color:white;
}
}
&.second{
background:green;
&.item:extend(.top.first.item){}
}
}
CSS Output
.top.first {
background: black;
}
.top.first.item,
.top.second.item {
color: white;
}
.top.second {
background: green;
}
Which of course requires a change in your html designation from class="top-first-item" to class="top first item".
This is obviously something that should be working in LESS. I have a few months ago put an issue on the LESS.js github regarding exactly this.
Link to Github issue
In the mean time, i recommend using seven-phases-max's solution by simply putting the classes together like so:
&-first, &-second {}
But then you cant abstract the second out into another file.
Another solution would to make an "extends.less" file, in which you can have small snippets you find your self using time from time.
Just use 'all' suffix. Example: &:extend(.top-first-item all);
Are there containers for CSS Selectors?
I'm simply curious if there's a more elegant way to do this without repeating the class:
#div1 .divClass, #div2 .divClass { color:cyan; }
This is what I had in mind, but I don't think there's a way to do it.
#div1,#div2 > .divClass { }
[#div1,#div2] .divClass { }
Short answer: No.
It seems a case where you can add a class for both divs.
<div id="div1" class="sharedClass"></div>
<div id="div2" class="sharedClass"></div>
.sharedClass > .divClass { color: cyan; }
Anyway, this question can have multiple answers. Consider looking at LESS, which extends CSS capabilities. Then you could do something awesome like this:
.divClass {
/* ... */
}
#div1 {
color: red;
border: 1px solid blue;
.divClass;
}
#div2 {
color: cyan;
border: 1px solid green;
.divClass;
}
Sounds like you're looking for a something like LESS, which is a stylesheet language which can be compiled into ordinary CSS. It might not do exactly what you're after in your specific case (but then again, it might, I haven't tried) but it sounds like it would be useful to you.