Maybe it is a silly question but how can I break this line of code (with a lots of :not) so it won't be that long:
input {
&:not(.ant-calendar-input):not(.ant-time-picker-panel-input):not(.ant-calendar-picker-input):not(.ant-time-picker-input) {
width: 100%;
height: 100px;
}
I tried this but it doesn't work:
input {
&:not(.ant-calendar-input),
&:not(.ant-time-picker-panel-input),
&:not(.ant-calendar-picker-input),
&:not(.ant-time-picker-input) {
width: 100%;
height: 100px;
}
Your original SCSS is equivalent to the following SCSS:
input {
&:not(.ant-calendar-input) {
&:not(.ant-time-picker-panel-input) {
&:not(.ant-calendar-picker-input) {
&:not(.ant-time-picker-input) {
width: 100%;
height: 100px;
}
}
}
}
}
Which looks a bit nicer as SASS:
input
&:not(.ant-calendar-input)
&:not(.ant-time-picker-panel-input)
&:not(.ant-calendar-picker-input)
&:not(.ant-time-picker-input)
width: 100%
height: 100px
Related
Is it possible to create a sass, scss, or css selector that could take a value in the selector and apply it to the style?
Example (with wrong syntax since I don't know how to do it:
.w(\d+) {
width: $1% ;
}
In the above example,
.w100 => width: 100%
.w82 => width: 82%
and so on.
you can use #for loop to do this.
Example:
#for $i from 1 through 100 {
.w#{$i} {
width: $i * 1%;
}
}
this loop will generates below css as output:
.w1 {
width: 1%;
}
.w2 {
width: 2%;
}
.w3 {
width: 3%;
}
.w4 {
width: 4%;
}
.
.
.
.w100 {
width: 100%;
}
I need to set vars according to a class which are .withtable and .notable and the positioning of elements is different. See the image or check the code example:
body.withtable {
$logo_width: 130px;
$logo_height: 80px;
}
body.notable {
$logo_width: 200px;
$logo_height: 100px;
}
How to solve this thing? Any ideas?
You can't pass the variables that way. You might want to approach this the following way however:
.logo {
body.withtable & {
$logo_width: 130px;
$logo_height: 80px;
width: $logo_width;
height: $logo_height;
}
body.notable & {
$logo_width: 200px;
$logo_height: 100px;
width: $logo_width;
height: $logo_height;
}
}
This keeps the code readable and manageable as you keep your logo properties in one place. Placing the & character at the end checks if this is a parent instead of a child of .logo.
This compiles into:
body.withtable .logo {
width: 130px;
height: 80px; }
body.notable .logo {
width: 200px;
height: 100px; }
}
as I understand from here, I can't place my CSS selectors which contains "pseudo browsers selectors" (-moz-range-track, -webkit-slider-thumb, and so on) separated by comma, because if browser did not recognize one of the selectors then will ignore all the rules in curly brackets {}.
So when I try to compile my LESS rules:
input {
&[type=range]{
&::-moz-range-track,
&::-webkit-slider-runnable-track
{
width:100%;
height: 32px;
}
}
}
In the result I will see:
input[type=range]::-moz-range-track,
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 32px;
}
Which will not work because of reason I mentioned earlier.
So in LESS I have to do it like (it isn't of course LESS style):
input {
&[type=range]{
&::-moz-range-track
{
width:100%;
height: 32px;
}
&::-webkit-slider-runnable-track
{
width:100%;
height: 32px;
}
}
}
Which compiles to:
input[type=range]::-moz-range-track {
width: 100%;
height: 32px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 32px;
}
And works as expected.
And my question, is there any possible to do it looks nicely in LESS?
I am completely new to SASS.
This is the SASS code I have
#mixin set-width-and-margin($label-width: 150px, $value-margin-left: 20px){
.label-class {
width: $label-width;
}
.input-class {
margin-left: $label-width + $value-margin-left;
}
}
.form-1 {
#include set-width-and-margin();
}
.form-2 {
#include set-width-and-margin(100px);
}
It outputs the following CSS code.
.form-1 .label-class {
width: 150px;
}
.form-1 .input-class {
margin-left: 170px;
}
.form-2 .label-class {
width: 100px;
}
.form-2 .input-class {
margin-left: 120px;
}
I want to add another class .form-3 and set the margin-left value to 0 without affecting the width.
This is the desired CSS output.
.form-3 .label-class {
width: 150px;
}
.form-3 .input-class {
margin-left: 0;
}
The only solution I know is this.
.form-3 {
.label-class {
width: 150px;
}
.input-class {
margin-left: 0;
}
}
While it does work I want to know if there is a better solution for this.
You can just simply call your mixin with two parameters. You can overwrite $value-margin-left to -150px so that the resulting margin-left is 0px.
.form-3 {
#include set-width-and-margin(150px, -150px);
}
If that isn't nice enough, the alternative is to overwrite the margin left after you call your mixin (or, remake your function to accomodate this more cleanly).
.form-3 {
#include set-width-and-margin(150px);
.input-class {
margin-left: 0px;
}
}
I'm using the Gridster plugin, where columns width are defined like this:
[data-sizex="12"] { width: ... }
[data-sizex="11"] { width: ... }
[data-sizex="10"] { width: ... }
....
I have 2 questions about this;
What kind of CSS classes are these? I have never done/seen anything like this, especially in CSS.
If I want to select all the columns from 1-12, how do I use the code? Typically I'm using something like [class*=".."] this. I don't think so I can get a format like this for the above scenario.
1) These are CSS attribute selectors, to be specific these are Attribute presence and value selectors
2) If you want to select all the columns you don't have to use attribute selectors, just apply the CSS to the element. Well, for gridster plugin can replace .grid with .gs_w { }, .gs_w[data-sizex="12"]{ } and so on in the demo jsfiddle.
.grid{
/* Applies to all */
background: #808080;
color: #fff;
border: 1px solid #eee;
padding: 5px 10px;
}
.grid[data-sizex="12"]{
width: 720px;
}
.grid[data-sizex="11"]{
width: 710px;
}
.grid[data-sizex="10"]{
width: 700px;
}
.grid[data-sizex="9"]{
width: 690px;
}
.grid[data-sizex="8"]{
width: 680px;
}
.grid[data-sizex="7"]{
width: 670px;
}
.grid[data-sizex="6"]{
width: 660px;
}
.grid[data-sizex="5"]{
width: 650px;
}
.grid[data-sizex="4"]{
width: 640px;
}
.grid[data-sizex="3"]{
width: 630px;
}
.grid[data-sizex="2"]{
width: 620px;
}
.grid[data-sizex="1"]{
width: 610px;
}
Demo Here