I am new to sass.
Here is my code in scss. Just wondering if this can be simplified further i.e i dont want to repeat the style color, text-decoration and transition.
a {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
div.menu-item-click {
&:hover, &:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
}
Note exactly that use case is covvered better by ReSedano.
You cand do it using mixins:
#mixin mixinName {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
a {
#include mixinName;
}
div.menu-item-click {
&:hover, &:focus {
#include mixinName;
}
}
Also here is example with variables:
#mixin icon($width) {
width: $width;
stroke: currentColor;
}
.icon {
#include icon(25px);
}
And here is example with body
#mixin desktop ($xl: null) { // look here is default Value!
#media (min-width: if($xl, $xl, $screen-desktop)) {
#content; // here is true magic
}
}
.page {
#include desktop { // you may ignore variable because we have default
padding: 30px;
}
}
For this, maybe it is better using a placeholder with #extend directive (the output is less verbose than using a mixin):
%my-class {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
a {
#extend %my-class;
}
div.menu-item-click {
&:hover, &:focus {
#extend %my-class;
}
}
The output is:
a, div.menu-item-click:hover, div.menu-item-click:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
Related
I'm trying to group all my vendor-specific stuff into a placeholder selector like this:
%search-bar-placeholder {
color: red;
}
.search-bar::-webkit-input-placeholder {
#extend %search-bar-placeholder;
}
.search-bar:-moz-placeholder {
#extend %search-bar-placeholder;
}
.search-bar::-moz-placeholder {
#extend %search-bar-placeholder;
}
.search-bar:-ms-input-placeholder {
#extend %search-bar-placeholder;
}
And then it compiles to this:
.search-bar::-webkit-input-placeholder, .search-bar:-moz-placeholder, .search-bar::-moz-placeholder, .search-bar:-ms-input-placeholder {
color: red; }
How can I make sure Sass doesn't put all the selectors together ? Like this:
.search-bar::-webkit-input-placeholder {
color: red;
}
.search-bar:-moz-placeholder {
color: red;
}
.search-bar::-moz-placeholder {
color: red;
}
.search-bar:-ms-input-placeholder {
color: red;
}
When looking at Extend/Inheritance at sass-lang.com it seems that the selectors will always be comma separated. Even if you add another property, it will keep the shared properties in the comma separated list, and add another selector just for that overridden value.
The way I achieved what you want is by using a mixin. Though it's not really the purpose of a mixin, it does get the job done. Your style is still centralized and you can print it out in each selector using a one liner too.
#mixin placeholder-properties() {
color: red;
font-weight: bold;
}
.search-bar::-webkit-input-placeholder {
#include placeholder-properties();
}
.search-bar:-moz-placeholder {
#include placeholder-properties();
}
.search-bar::-moz-placeholder {
#include placeholder-properties();
}
.search-bar:-ms-input-placeholder {
#include placeholder-properties();
}
The result will the following.
.search-bar::-webkit-input-placeholder {
color: red;
font-weight: bold;
}
.search-bar:-moz-placeholder {
color: red;
font-weight: bold;
}
.search-bar::-moz-placeholder {
color: red;
font-weight: bold;
}
.search-bar:-ms-input-placeholder {
color: red;
font-weight: bold;
}
Here's a fiddle.
Using sass with rails. In the design, there is a pattern that the space shrink to half from desktop to mobile. Now it ends up like:
.my-page {
.class-a {
margin-top: 20px;
margin-bottom: 20px;
}
.class-b {
padding-top: 30px;
padding-bottom: 30px;
}
}
#media(min-width: 768px) {
.my-page {
.class-a {
margin-top: 40px;
margin-bottom: 40px;
}
.class-b {
padding-top: 60px;
padding-bottom: 60px;
}
}
}
Wondering is there a good way to DRY these? Don't wanna repeat writing same classes twice.
A nice way to DRY up your sass is using mixins.
#mixin page-spaces($margin, $padding) {
.my-page {
.class-a {
margin-top: $margin;
margin-bottom: $margin;
}
.class-b {
padding-top: $padding;
padding-bottom: $padding;
}
}
}
#include page-spaces(20px, 30px);
#media(min-width: 768px) {
#include page-spaces(40px, 60px);
}
SASS Reference on Mixins
Edit: In order to clarify the intended use of mixins, here's an extended version with multiple arguments (even a default):
#mixin awesome-page-stuff($stylish-margin, $cute-padding, $some-left-margin, $ugly-background: red) {
.my-page {
background: $ugly-background;
.class-a {
margin-top: $stylish-margin;
margin-bottom: $stylish-margin;
}
.class-b {
padding-top: $cute-padding;
padding-bottom: $cute-padding;
margin-left: $some-left-margin;
}
}
}
#include awesome-page-stuff(20px, 30px, 50px);
#media(min-width: 768px) {
#include awesome-page-stuff(40px, 60px, 200px, green);
}
you can create variables, something like this:
$primary-margin: 20px;
$primary-padding: 30px;
.my-page {
.class-a {
margin-top: $primary-margin;
margin-bottom: $primary-margin;
}
.class-b {
padding-top: $primary-padding;
padding-bottom: $primary-padding;
}
}
#media(min-width: 768px) {
.my-page {
.class-a {
margin-top: $primary-margin*2;
margin-bottom: $primary-margin*2;
}
.class-b {
padding-top: $primary-padding*2;
padding-bottom: $primary-padding*2;
}
}
}
How can I do that :
#mixin addMargin($el) {
$el {
margin-left: 5px;
}
$el:hover {
margin-left: 10px;
}
}
using sass ?
Thanks for your help
In a mixin, you can not only add properties directly to an element, but you can also add more rules:
#mixin addMargin {
margin-left: 5px;
&:hover {
margin-left:10px;
}
}
Note that you have to prefix the :hover with & so that we get this rule:
#something-with-the-mixin-applied:hover
instead of
#something-with-the-mixin-applied :hover
Use interpolation:
#mixin addMargin($el) {
#{$el} {
margin-left: 5px;
}
#{$el}:hover {
margin-left: 10px;
}
}
#include addMargin(h1);
But Yogu is right, you don't need it here. You may omit selectors, leaving only directives in your mixin, and apply the mixin inside a selector:
#mixin addMargin {
margin-left: 5px;
&:hover {
margin-left:10px;
}
}
h1 {
#include addMargin;
}
Maybe a better question would be, Is there a more efficient way to override parts of a mixin?
This piece of SCSS:
#mixin button {
.button {
background-color: red;
color: white;
}
}
.container {
#include button;
.button {
background-color: green;
}
}
compiles to:
.container .button {
background-color: red;
color: white;
}
.container .button {
background-color: green;
}
I wish it could compile to:
.container .button {
background-color: green;
color: white;
}
Pass an argument into the mixin instead:
#mixin button($color: red) {
background-color: $color;
color: white;
}
.container {
.button {
#include button(green);
}
}
I'm working on an SCSS stylesheet, and I have a rule that looks something like this:
.footer-link-row {
color: red;
ul& {
padding: 0;
}
}
I want the ul& line compile to the selector ul.footer-link-row. However, this selector returns a compiler error, and using a &ul compiles to .footer-link-row ul. What's the correct way to select something like this?
--Added--
To clarify, the eventual CSS I want out of this is:
.footer-link-row {
color: red;
}
ul.footer-link-row {
padding: 0;
}
You want something like the following:
ul {
padding: 0;
.footer-link-row {
color: red;
}
}
The ampersand is used to require that both selectors match
a { text-decoration: none;
&:hover { border-width: 1px }
}
// compiles to
a {
text-decoration: none;
}
a:hover {
border-width: 1px;
}
If you want the ul.footer-link-row try
ul {
&.footer-link-row {
padding: 0;
}
.footer-link-row {
color: red;
}
}
Your clarification indicates that you need two scopes.
ul {
&.footer-link-row {
padding: 0;
}
}
.footer-link-row {
color: red;
}