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.
Related
I'm converting a long CSS file into SCSS and got stuck on the following piece of CSS which consists of the a child div that can have different parent divs:
.dark-bg li.accordion-item,
.image li.accordion-item,
.parallax li.accordion-item {
margin: 0;
}
Could that be convertible to SCSS?
Thank you.
Any CSS is valid SCSS. If you rely want to make more like SCSS, you could write:
.dark-bg, .image, .parallax {
li.accordion-item {
margin: 0;
}
}
Is this ok?
#mixin hasAccordion() {
& li.accordion-item {
margin: 0;
}
}
.dark-bg, .image, parallax {
#include hasAccordion;
}
In my project I have many elements that will take this property text-align: center.
How can we avoid writing this declaration in all elements using Sass?
In other words, is there more efficient way to do something like this:
.one {
text-align: center;
}
.two {
text-align: center;
}
Try to use the power of pure CSS!
.one, .two {
text-align: center;
}
Use mixins
example
Declare
#mixin centerAlign {
text-align : center;
}
Use
.one {
#include centerAlign;
}
.two {
#include centerAlign;
}
You can also try like this
.text-center{
text-align:center;
}
Include text-center in html code where you want to display center align.
ex
<p class='text-center'>...</p>
<div class='text-center'>...</div>
You could also use extensions:
.center-align {
text-align:center
}
.one, .two {
#extend .center-align;
/*additional styling*/
}
It pretty much works out the same way as has been previouly posted
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;
}
I want to add scope to my selectors.
A good way to achieve it in my opinion is to select css selector and return mySelector + oldSelector
For example I have .old { background: black; }, I would transform it into .mySelector .old { background: black; }
Let's say I have this CSS
.a
{
background: red;
}
#b {
background: green;
}
input {
background: blue;
}
[type=custom] {
background: white;
}
I would do .+?{, but it selects not needed parts. Inverse of {.+?} would work, but I don't know how to inverse it. Any ideas ?
I figured out I can use String.match({.+?}) to get all rules and String.split({.+?}) to get selectors in JavaScript.
Also I've found a library to easily parse CSS in JavaScript https://github.com/reworkcss/css
I was wondering if something like this can be done in CSS. I want to be able to group css so that I can I don't have to write it like this.
.wrapper .header {do: something};
.wrapper .nav .firstMenuItem {do: something};
[div id="wrapper"]
[div class="header"]
[div class="nav"]
[ul]
[li class="firstMenuItem">First Item</li]
[/ul]
[/div]
[/div]
[/div]
Instead, I would like to do something like this but I've never seen it being used like this
.wrapper
{
.header .nav {do:something;}
.header .nav .firstMenuItem
{
do: something;
}
}
You can do this with LESS and SASS
However, before going too far down this road I recommend you read a little about Object Oriented CSS. (Some good tips from people who have experience with large projects)
LESS example:
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:hover { text-decoration: none }
}
}
SASS example:
.error {
border: 1px #f00;
background: #fdd;
}
.error.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
#extend .error;
border-width: 3px;
}
You can't do that with pure CSS, but you can use something like:
LESS
SCSS
Not with CSS alone, but you can for example use LESS which provides this kind of nesting.
I'm afraid that is just not possible in classic CSS. It is against the syntax.
There to exist interpreters for alternative syntaxes, which will just turn your syntax into valid CSS either at compile-time or run-time. You could look for or write one of those.
But if you want what you write to be valid CSS, this is just not possible.