Assuming there is an scss file with predefined rules such as .btn {..} or .btn-primary...
I aim to create my own rules by building upon the existing ones
.my-button {
@extend .btn
@extend .btn-primary
}
without directly adding the .btn and .btn-primary classes to my final css file?
Typically, I would have to @import existing.scss, but this imports all the rules from that file into my css output.
If you are looking to achieve a specific functionality in Sass, you may find that it does not support it out of the box with the @import or @use rule.
However, there is a workaround if you are able to make use of npm packages like npm or yarn. You can try using a tool like node-sass-magic-importer.
For instance, you could implement the following solution:
@import '{ .btn, .btn-primary } from ~bootstrap';
.my-button {
@extend .btn
@extend .btn-primary
}
Please note that this method may not produce the exact outcome you desire, but it will import only the specified classes without pulling the entire stylesheet. If you wish to take it a step further, you can try:
@import '{ .btn as .my-button } from /bootstrap/_buttons.scss';
@import '[variables] from /bootstrap/_variables.scss';
@import '[mixins] from /bootstrap/mixins/_buttons.scss';
.my-button {
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}
It is advisable to utilize the power of @mixins and @include in this scenario.
However, considering that you are working with an existing file (potentially from a third party) that already defines these rules, converting the classes into mixins could prove to be laborious.
If you only need a handful of classes from this file, it might be worth the effort.
You would need to transform:
.btn{
/*
some cool styles
*/
}
to:
@mixin{
/*
cooler styles
*/
}
Nevertheless, as outlined in the Sass documentation, mixins can serve your purpose effectively.
Here is an example of SCSS code:
@mixin reset-list {
margin: 0;
padding: 0;
list-style: none;
}
@mixin horizontal-list {
@include reset-list;
li {
display: inline-block;
margin: {
left: -2px;
right: 2em;
}
}
}
nav ul {
@include horizontal-list;
}
The resulting CSS will be:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
display: inline-block;
margin-left: -2px;
margin-right: 2em;
}
Using @import in SCSS for imports can lead to a more efficient webpack dependency graph during production builds. The imported files will be included only once at the top level, creating a common chunk if used in multiple places. However, it may result in unused SCSS being included as well due to limited tree shaking functionality.
Overall, this approach should not significantly impact the production build process.
I stumbled upon this codepen showcasing a CSS-only toggle switch. After attempting to modify the colors to have a white background and black font when checked, and a black background and white font when unchecked, I've run into difficulties recreatin ...
I am currently developing a small app and encountering issues with deleting (fading out) dynamically loaded div elements using jQuery. The problem occurs when adding a new content box. If the page is reloaded and the content box is rendered normally (from ...
Struggling with selecting specific divs in CSS. Snippet of my code: <div class="card"> <div class="test">Asdasdasd</div> </div> <div class="card"> <div class="test">Asdasdasd</div> </div> <div class= ...
I would like to determine the status of the image within the img tag using a flag called "imagestatus" in the provided code: echo '<a href="#" class="swap-menu"><img id="menu_image" src="images/collapsed.gif" hspace = "2"/>'.$B-> ...
I'm facing some issues with the navigation bar on my responsive website. One issue is that the clickable area for the links does not extend to the full height of the nav bar, and I would like it to cover the entire height. Another problem arises whe ...
Are pug/jade and sass compatible with react? I enjoy organizing my code by separating files, and the functionality that sass and pug provide is great for this purpose. Is there a way to integrate pug and sass into a react project? Pug example: doctype ...
My goal is to create a HighCharts report based on survey data for a panel discussion. Participants will use their smartphones to vote on 10 questions, and a moderator will discuss the results one by one in a non-sequential order. Objective... When the us ...
I've been attempting to recreate the functionality of this codepen, and I've encountered an issue with the vw declaration in Chrome. Despite setting GalleryGrid to 100vw, it doesn't display correctly in Chrome, while Firefox and Safari work ...
Check out this fiddle http://jsfiddle.net/QLCeH/ where the text isn't aligning properly with the header "Google" and is ending up below the image. Here's the code from the fiddle: HTML : <div style="margin-left:auto;margin-right:auto; widt ...
We are currently in the process of transitioning old pages from our previous website structure, which used tables, to our new layout based on DIVs. Our website is structured using a PHP include system with separate components for the header, body, and foot ...
After globally installing scss-bundle using npm install scss-bundle -g on my Mac, I attempted to run the command scss-bundle -e ./projects/primeng-lib/src/style/_styles.scss -d ./dist/primeng-lib/style/_styles.scss, but encountered an error stating bash: ...
I'm not seeking a revolutionary way to handle the images, as I have already consumed a lot of information about loading images. My focus is on basic responsive design, where I aim to load a large image and compress it as the window size reduces. Bel ...
I am currently working with a grid that displays images as values in one of its columns using the code below. { field: 'TR', displayName: 'Trigger Redundancy', cellTemplate: '<div class="ngCellText" ng-class="col.co ...
I'm currently developing an app using React Native and I need to position something on the right side of the screen. <View style={searchDrop}> <TextInput style={textInput} placeholder="Search Coin ...
My question revolves around a fixed position div element whose height varies based on its content. In order to enable auto scrolling, I have applied the CSS property overflow-y: auto and assigned a fixed height. Is there a method to dynamically adjust the ...
I have a script that fetches data from my database and generates pagination. Everything is working fine, but now I want to include a conditional statement to differentiate the user level as New, Current, or Renewing client. I've already set up some s ...
Looking for a solution with my wrapper class that has specific CSS properties as follows: #wrapper { margin-left: -320px; left: 350px; width: 300px; position: fixed; overflow-y: scroll; overflow-x:hidden; top: 60px; bottom: 10px; transit ...
Is there a way to use CSS to ensure that the scroll bar of a fixed-height message box is always at the bottom, displaying the latest entry? Currently, as more messages populate the chat box main section, everything inside remains static. The only way to v ...
My HTML code contains font awesome icons, and I'm looking to have text appear below each icon instead of next to it. Currently, the text is displayed midway to the right of each icon. <div class="icons"> <span class="fa-stack f ...
How can I achieve an effect similar to this https://i.sstatic.net/ulZFR.png? I have attempted using strokeDashoffset and strokeDasharray, but I am still unable to achieve the desired result. I know that I can draw multiple lines, but I need a script that ...