I'm new to tailwindcss, and i want to use both sassy css and tailwind for my new project. But I'm having trouble with the nesting specially when i used "#apply".
section {
#apply .p-4;
ul {
li {
#apply .ml-8 .text-red-600;
li:last-child {
#apply .text-gray-300;
}
}
}
}
the red color apply to all li but the last-child (gray color) is not working. I'm not sure if it's possible
Right now we cant combine the SCSS and tailwind file. But we can achieve this by doing like this, give a class name to ul tag mylist
section {
#apply .p-4;
}
.mylist li {
#apply .ml-8 .text-red-600;
}
.mylist li:last-child {
#apply .text-gray-300;
}
You can use Sass and Tailwind together, though there are a few things to watch out for as detailed in the docs.
Though, as also noted in the docs it is recommended that you use PostCSS exclusively as your pre-processor. You can use nesting, variables and much, much more with PostCSS, there's really nothing that you can do with Sass that you cannot do with PostCSS.
I switched my build process from using Sass to PostCSS exclusively, more than 3 years ago, and I've not found anything missing. Indeed I can do so much more, I've never looked back.
Selector you're trying to build here will be compiled to something like:
section ul li li:last-child {...}
I think what you're trying to achieve here is this:
section {
#apply .p-4;
ul {
li {
#apply .ml-8 .text-red-600;
}
li:last-child {
#apply .text-gray-300;
}
}
}
Sure they can!
Nothing's wrong with them, there are couple of very small drawbacks but nothing special.
If your case, you have a tiny mistake in your code
section {
#apply p-4;
ul {
li {
#apply ml-8 text-red-600;
&:last-child {
#apply text-gray-300;
}
}
}
}
Related
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 { ... }
Is there a more efficient way to add these prefixes instead of having two lines for each icon? One for fa-ion-md and one for fa-ios-md
$fa-menu-size: 2.4rem;
.menu-inner {
.#{$fa-ion-md-css-prefix}-glass,
.#{fa-ion-ios-css-prefix}-glass,
.#{$fa-ion-md-css-prefix}-music,
.#{fa-ion-ios-css-prefix}-music,
[many more icons]
.#{$fa-ion-md-css-prefix}-meetup,
.#{fa-ion-ios-css-prefix}-meetup {
font-size: $fa-menu-size;
}
}
Probably the simplest way would be to go with the classic ampersand parent selector to combine the prefixes with the suffixes:
$fa-ion-md-css-prefix: "fa-ion-md";
$fa-ion-ios-css-prefix: "fa-ion-ios";
$fa-menu-size: 2.4rem;
.menu-inner {
.#{$fa-ion-md-css-prefix},
.#{$fa-ion-ios-css-prefix} {
&-glass,
&-music,
&-meetup{
font-size: $fa-menu-size;
}
}
}
You could use iteration, DEMO
$fa-menu-size: 2.4rem;
$fa-ion-md-css-prefix: "fa-ion-md";
$fa-ion-ios-css-prefix: "fa-ion-ios";
$icons: glass, music, meetup, stuff, things;
#each $icon in $icons {
#{$fa-ion-md-css-prefix}-#{$icon},
#{$fa-ion-ios-css-prefix}-#{$icon} {
font-size: $fa-menu-size;
}
}
Can you help me improve the following to SCSS:
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:active,
.navbar-default .navbar-brand.active {
color: $mainhover-color;
}
Your question does not make much sense.
Anyway - it is already valid SCSS - but invalid CSS as it requires compilation.
There are plenty of online CSS to SCSS converters. But none of them will work unless you change $mainhover-color to its compiled value.
This is what it would be post-refactoring:
.navbar-default {
.navbar-brand {
&:hover,
&:focus,
&:active,
&.active {
color: $mainhover-color;
}
}
}
This is not a very useful question on SO. You should read up on SCSS basics.
There is no need for you to change that to SCSS as CSS is valid in SASS/SCSS and that all you would add is nesting, but provided you still want to do it, you could go this way :
.navbar-default {
.navbar-brand {
&:hover,
&:active,
&:focus,
&.active {
color: $mainhover-color;
}
}
}
Keep in mind that this doesn't make it better, it's just another syntax. I advise you read more on SCSS basics.
I have a top bar menu (that's based on Zurb's Foundation):
This is the SCSS:
.top-bar {
.top-bar-section {
ul {
#import "menu-icons/*.png";
#include all-menu-icons-sprites;
}
}
}
Now, this does what expected, but the problem is that I want to style the a element inside each li elements (actually, I'd like to apply it to .top-bar.topbar-section.ul.li.a:before).
However, since the site is build in WordPress, and so the menu, I can only assign the class to the li element and I have no idea how to make the Compass's spriting work.
I know, I could customize the way the menu is rendered by WordPress using a walker class, but I'd prefer to try finding a solution simply writing the right SCSS, providing that is possible.
There are a few sprite helper functions to be aware of when the default output isn't exactly what you want:
sprite-url
sprite-position
sprite-names (undocumented)
Using these you can apply the sprite styles to the children of the li elements:
.top-bar .top-bar-section ul > li {
// Generate the sprite map.
$menu-icons-sprite-map: sprite-map("menu-icons/*.png", $layout: smart);
// Set the background image.
> a:before {
background: sprite-url($menu-icons-sprite-map) 0 0 no-repeat;
}
// Set the background position for each sprite.
$menu-icons-sprite-names: sprite-names($menu-icons-sprite-map);
#each $name in $menu-icons-sprite-names {
&.menu-icons-#{$name} > a:before {
background-position: sprite-position($menu-icons-sprite-map, $name);
}
}
}
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
}