When creating a table, I want to use border-spacing: 0 15px;. But I found that there is no corresponding utility in TailWindCSS. So I want to create a utility, my approach is like this:
#layer utilities{
.border-spacing-0: {
border-spacing: 0 15px;
}
}
Then terminal reported me an error:
[vite] Internal server error: Expected a pseudo-class or pseudo-element.
Plugin: vite:css
File: F:/LearnCode/Front-end/Project/xust-admin/xust_kcsoft_admin/src/index.css
at Root._error (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\parser.js:174:16)
at Root.error (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\selectors\root.js:43:19)
at Parser.error (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\parser.js:740:21)
at Parser.expected (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\parser.js:1129:19)
at Parser.pseudo (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\parser.js:875:19)
at Parser.parse (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\parser.js:1080:14)
at Parser.loop (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\parser.js:1039:12)
at new Parser (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\parser.js:164:10)
at Processor._root (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\processor.js:53:18)
at Processor._runSync (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\processor.js:100:21)
But the strange thing is I just create a project a few days ago. It used the same approach and it also use TailWindCSS in vite. And it succeeded.
You should remove colon : after .border-spacing-0
Then Your error will disappear ;-) Here You can read more about it.
#layer utilities {
.border-spacing-0 {
border-spacing: 0 15px;
}
}
Related
I have a node 18.7.0 project that uses nuxt 2.15.8. I have the following scss code inside my vue component
<style lang="scss">
.Accordion {
--Accordion__margin-top: 2.5rem;
&__items {
margin-top: calc(var(--Accordion__margin-top) * -1);
}
}
</style>
When I run a nuxt build I get a postcss error with not much detail except
syntax error at line 1
If I change simply the line like so it works
margin-top: var(--Accordion__margin-top);
What is wrong with my syntax?
I solved it by adding a new variable $margin-top
then updated the problem line as follows
$margin-top :2.5rm;
`margin-top: calc(margin-top * -1);`
I'm attempting to style different code blocks depending on which tag they are present in:
code blocks that are inside a pre tag, and
code blocks that are NOT inside a pre tag
I know that I can just use the :not selector in plain css:
pre > code {
color: red;
}
:not(pre) > code {
color: blue;
}
But using it in sass throws an error and fails to compile:
:not(pre) > code
color: blue
Error:
Generating development JavaScript bundle failed
^
Invalid CSS after "...size: 1.5rem; }": expected 1 selector or at-rule, was "not(pre) : {"
in /Users/Psy/my-app/src/styles/v3/base.sass (line 111, column 23)
File: src/styles/v3/base.sass
failed Re-building development bundle - 0.339s
What is the correct way to do the same in Sass?
To be clear: I'm not looking for other ways for "reorganizing" my Sass code. Instead, looking for an explicit selector where a tag is not inside another tag.
Okay, I probably should've done this sooner, but I searched Github to see how other sass projects do the same.
Looks like while the :not selector works in SCSS the same way it works in CSS, we need to prefix the :not selector with * for SASS files:
*:not(pre) > code
color: blue
This works without errors.
You don't have to use :not selector. You can simply style the code and code under pre tag. This will provide the intended result:
code {
color: blue;
}
pre > code {
color: red;
}
I'm trying to convert a [www.bootswatch.com][1] theme from less to scss for my rails app.
Problem is I'm no expert on either SCSS or LESS :(
I've read up on some of the differences and I've figured variable differnces using # and $
I've got an issue with the my LESS code , can someone tell me what the snipet below should be when converted SCSS
// Buttons ====================================================================
.btn:active {
.box-shadow(none);
}
.btn-group.open .dropdown-toggle {
.box-shadow(none);
}
// Typography =================================================================
.text-primary,
.text-primary:hover {
color: $brand-primary;
}
.text-success,
.text-success:hover {
color: $brand-success;
}
.text-danger,
.text-danger:hover {
color: $brand-danger;
}
.text-warning,
.text-warning:hover {
color: $brand-warning;
}
When I run my app I'm getting the following message
Invalid CSS after " .box-shadow": expected "{", was "(none);"
You could install the bootstrap SASS for ruby: Bootstrap SASS Gem
But to better answer your question try #extend .box-shadow(none)
I've been using what I thought was a very elegant pattern for defining the styles of reusable components/widgets, using LESS. It works beautifully in LESS 1.3-, but after upgrading recently, my whole library is broken. Does anyone know a way to accomplish something like this in 1.4+?
Here's a very simple example of a component:
#componentName {
.loadMixins(){
.text() {}
.header() {}
}
.apply(){
> h3 {
// markup-specific styles
padding: 3px;
margin-bottom: 0;
// custom styles
.header();
}
> div.body, > div.popup p {
color: red;
// custom styles
.text()
}
}
}
And here's how it would be used:
.coolWidget {
#componentName.loadMixins();
// override mixins here
.text(){
color: green;
}
#componentName.apply();
}
This keeps all the markup-dependent styles abstracted from the user. I could completely change my markup and the user's styles would still work. According to the less.js changelog, 1.4.0 Beta 1 has a line "variables in mixins no longer 'leak' into their calling scope"
Is there any way around this?
Strictly speaking nested variables and mixins are still expanded into calling scope unless this scope already has those names defined.
Your example above results in a error:
SyntaxError: .header is undefined...
and it's expected as no .header() is actually defined within the .coolWidget (or anywhere else).
This can be fixed by providing "default" definitions for .text and .header somewhere inside #componentName.
For example if you modify .loadMixins() to:
.loadMixins() {
.text();
.header();
// default properties in case a caller does not provide its own:
.text() {}
.header() {}
}
then the example compiles OK and all text/header properties are overridden as expected.
I can imagine how your library may become broken because of new scope rules but this particular example you gave above does not illustrate the problem.
I need to add a dynamic name to a CSS class to create a more specific decendent selector.
Here is my Less code:
#scope: name; //line1
.#scope .ui-widget{ color: #fff} //line2
But I am getting a parser error at line2.
Is there any way to set the CSS class name dynamically in LessCSS?
Support was added to less.js and dotless in version 1.3
You have to use brackets and an escaping string.. e.g.
(~".#{scope} .another") {
color: #fff;
}
Edit
This format is deprecated. less 1.3.1 (currently just trunk build of less.js) supports a simpler syntax
.#{scope} .another-class {
color: white;
}
Try the below code to get the expected output
#scope: name;//line1
(~".#{scope} .ui-widget") { color: #ffbbff} //line2