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
Related
What's the best way to accomplish the ability to use class prefixes using a mixin with placeholder selectors.
To elaborate, say I have a box class that has 3 sizes but I would like to have the option of having it a different color.
My base classes would be:
.box
.box-md
.box-sm
If I wanted any of the base class boxes to be green, I would like to be able to specify as such:
.box-green
.box-md-green
.box-sm-green
How would I be able to do so in as DRY a method as possible?
Similar to this answer but using mixins AND placeholder extends: SCSS, how to #extend Nested ampersand "prefix"?
Here's what I put together so far (which doesn't work)
HTML:
<div class="box"></div>
<div class="box-green"></div>
<div class="box-sm"></div>
<div class="box-sm-green"></div>
CSS (SCSS):
// Main style placholder as mixin
#mixin box {
height: 300px;
width: 300px;
margin: 20px;
display: inline-block;
background-color: blue;
&-green {
background-color: green;
}
}
// Placeholders
%box {
#include box;
}
%small-box {
#include box;
width: 100px;
height: 100px;
}
// Class Definition
.box { #extend %box; }
.box-sm { #extend %small-box; }
Pen: https://codepen.io/Aricha_MW/pen/xxKZWbV
This isn't a complete answer but does pose as a solution to the problem:
Our champions are the #at-root directive and interpolation here. The solution requires both the use of mixins and placeholder selectors and is a little messy.
If we set up our placeholder selector styles:
%box {
height: 300px;
width: 300px;
margin: 20px;
display: inline-block;
background-color: blue;
}
%small-box {
#extend %box;
width: 100px;
height: 100px;
}
Then we can let mixins do the rest of the work for us.
First we define our mixin for the variation we want:
#mixin green-bg($selector, $root) {
// Takes element out of any nesting
// Then we interpolate our argument variables
#at-root{
#{$root}-green {
// We can't set a placeholder as an argument so we'll just borrow the string and append the placeholder definer '%'
#extend %#{$selector};
background-color: green;
}
}
}
Then we define our mixins that will help us define our classes
#mixin box($parent) {
#extend %box;
#include green-bg(box, #{$parent});
}
#mixin small-box($parent) {
#extend %small-box;
#include green-bg(small-box, #{$parent});
}
When we define our classes they'll look clean like so:
.box { #include box(&); }
.box-sm { #include small-box(&); }
Here's what the final product looks like in action: https://codepen.io/Aricha_MW/pen/oNvxjEw
Edit: 08/15/2019 - Much cleaner version here:
https://codepen.io/Aricha_MW/pen/mdbPVXY
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 first line I have the following style:
* {
text-align:left;
}
Which works well through the site as most of it is left aligned. However a handful of areas need to be text-align: center and it will not update, even with !important. for example:
table.footer {
text-align:center !important;
}
Any ideas on how I can fix this?
It should work as you can see in this live example.
You might want to do this instead:
table.footer td
{
text-align:center;
}
!important is not needed anyway.
Live example
I guees I know what is missing.
The table.footer selector does only match for a table with class footer, not for the elements inside it
You could do
table.footer td {
text-align: center;
}
See http://jsfiddle.net/mMM5q/
or perhaps even better
html {
text-align: left;
}
* {
text-align: inherit;
}
See http://jsfiddle.net/B3F9U/
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 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.