I use scss,
I have a css class, I need some css property to be different, depending of the html element:
<a class="myClass">...</a><input class="myClass"/>
I've try, but it don't work:
.myClass {
&.someOtherClass{...}
&text-area{...}
&input{...}
}
Any idea?
for easy readinf, I need the element to be define INSIDE the class, I can't use something like
input{ &.myClass{...}}
text-area{ &.myClass{...}}
With the #at-root directive you can write your SCSS code in a nested fashion but the resulting CSS will not be nested.
.myClass {
#at-root input#{&} { color: red; }
}
will result in
input.myClass {
color: red;
}
But honestly I don't find this better readable than just doing it KISS:
.myClass { ... }
input.myClass { ... }
Related
I'm trying to extend a nested class. Currently, I have this…
.button {
styles
&.primary {
styles
}
}
input[type="submit"] {
#extend .button;
}
This works fine; however, my problem is that I want to use the &.primary on my input.
input[type="submit"] {
#extend .button;
#extend .primary; // doesn't work
#extend .button.primary; // doesn't work
}
Is it possible to extend a nested SCSS selector?
I am creating a SCSS -> HTML plugin and need to first render SCSS -> CSS while keeping the nesting so I can then parse with PostCSS to then create an HTML tree with.
I would like to render SCSS like this
// myMixin.scss
#mixin myMixin {
.myMixin {
padding: 1rem;
background: yellow;
}
}
// main.scss
#import 'myMixin.scss';
$blue: #004AAD;
.button {
.text {
color: $blue;
}
#include myMixin;
}
And the output would look like this:
.button {
.text {
color: #004AAD;
}
.myMixin {
padding: 1rem;
background: yellow;
}
}
Basically, I'd like a way to render everything in SCSS while keeping the original nesting. Is it possible? Thanks.
Nesting is specific to SCSS. Also I don't think #import is best practice, use #use instead.
https://sass-lang.com/documentation/at-rules/use
Here is the thing our client(browsers) only support raw CSS and not SCSS, When you use SCSS it compiles down to raw CSS, And CSS doesn't have inbuilt Nesting feature.
I'm having a little issue with SASS #extend, placeholder class and interpolation.
I'm trying to keep the HTML as clean as possible and that's I decided to go for the #extend function in pair with placeholder classes. However, I'm mainly extending layout-related classes like grid, list etc - that's why I'm mixing a placeholder with a regular class in the declaration, i.e:
%drawer,
.drawer {
...
}
Everything was going just fine except for a moment when I noticed the interpolation with the variable being the ampersand in the main class causes some issues. Sample code (with most of the CSS rules removed):
%drawer,
.drawer {
$this: &;
position: fixed;
z-index: 10;
&__content {
right: 0;
transform: translate(100%, 0);
}
&__optional-element {
background: red;
}
&--left { // I want this modifier to be applied to the parent element as it may affect more than one children element
#{$this}__content {
left: 0;
transform: translate(-100%, 0);
}
}
}
And the extension code:
.product-drawer {
#extend %drawer;
&__content {
#extend %drawer__content;
}
}
However, the compiled CSS output is the following:
.drawer--left .product-drawer,
.drawer--left .drawer__content {
left: 0;
transform: translate(-100%, 0);
}
You may notice the first line is redundant and actually wrong. In addition, the "&__optional-element" bit is not outputted for the "product-drawer" extension which makes it really strange. It happens only to rules with the $this interpolation.
As soon as I remove the regular ".drawer" class from the original declaration (and just leave %drawer there), the problem is gone but in these layout-related classes (.grid, .list), we want to keep the regular class name as well so in some various, simple cases it can be used as well, without a need to write new CSS and extending it the placeholder class.
I know that this could be resolved by separating the placeholder class (%drawer) from the regular one (.drawer) completely and then extend the placeholder class inside the regular ".drawer" declaration but that would simply duplicate the code... Or maybe my approach is wrong by design?
Thank you!
The problem is not the #extend rule. The thing is that placeholders are a shallow copy of a class. If you extend from a class you are going to inherit all its properties, but if you extend from a placeholder it is only going to copy the first level.
See this example:
%placeholder{
content: 'placeholder';
&__element{
content: 'placeholder__element';
}
}
.a{
#extend %placeholder;
}
.class{
content: 'class';
&__element{
content: 'class__element';
}
}
.b{
#extend .class;
}
.a {
content: 'placeholder';
}
.class, .b {
content: 'class';
}
.class__element {
content: 'class__element';
}
By using both you're forcing placeholder class to use also the properties:
%placeholder,
.class{
content: 'class';
&__element{
content: 'class__element';
}
}
.b{
#extend %placeholder;
}
.b,
.class {
content: 'class';
}
.class__element {
content: 'class__element';
}
For example, I want to select element by attribute ng-controller (as in angularjs). I have a div with
<div ng-controller="foo1Ctrl"></div>
<div ng-controller="foo2Ctrl"></div>
<div ng-controller="foo3Ctrl"></div>
In scss, I would have to do:
[ng-controller="foo1Ctrl"] {}
[ng-controller="foo2Ctrl"] {}
[ng-controller="foo3Ctrl"] {}
To produce my scoped or nested css.
Is it possible for me to define some macro in scss?
(In C form, it would be something along this line)
#DEFINE ng(x) [ng-controller="x"]
ng(foo1Ctrl) {}
ng(foo2Ctrl) {}
ng(foo3Ctrl) {}
I just wonder if scss do have something along this line. If it doesn't have one, then I'll just use the original method.
The documentation shows pretty much everything you can do in Sass: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content
#mixin ng($value) {
[ng-controller="#{$value}"] {
#content;
}
}
#include ng('asdf') {
color: red;
}
Output:
[ng-controller="asdf"] {
color: red;
}
I have a SCSS file with the following
input{
&[type="text"],
&[type="search"]{
margin: 0 0.5em;
}
}
which works as expected. I would also like a textarea to have the same CSS. Does SCSS have a selector that will allow me to place textarea with the
&[type="text"], &[type="search"]
in the SCSS file but not place the 'input' parent before textarea. The output I'm trying to achieve is as follows
input[type="text"], input[type="search"], textarea {
margin: 0 0.5em;
}
I know I could do this with a mixin however I was thought this feature was added to SCSS.
#extend works really great in these situations. % is good as a way of implying that this class will only ever be extended.
%baseClass{
margin: 0 0.5em;
}
input{
&[type="text"],
&[type="search"]{
#extend %baseClass;
}
}
textarea{
#extend %baseClass;
}
No, you cannot. For a lengthy selector, The best you can do is set it as a variable and use that.
$form-input-text: unquote('input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"]');
#{$form-input-text} {
// styles;
}
#{$form-input-text}, textarea {
// styles
}