fbpx

Trick or Treat - 30% OFF - Coupon Code: SCARY20 Grab the Deal!

Welcome, Guest
Username: Password: Remember me

TOPIC: (SOLVED)How to use bootstrap breakpoints in custom scss?

How to use bootstrap breakpoints in custom scss? 1 year 6 months ago #13864

I try to use something like that in custom.scss file
.myclass {
    @include media-breakpoint-only(xs) {...}
}
But it's not work with parse error

Additional question:
What is the best way to do the full width background fix height only on index page? What should I use? Layout builder in template options and new section with new template position? With custom css (I wanted to do it through custom.scss and bootstrap breakpoints for responsive)
Last Edit: 1 year 6 months ago by Drainslavoch.
The administrator has disabled public write access.

How to use bootstrap breakpoints in custom scss? 1 year 6 months ago #13866

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Posts: 4153
  • Thank you received: 609
  • Karma: 108
Hi,
I am not that familier with SCSS but it looks like you can't do includes directly.
See:
sass-lang.com/documentation/file.SASS_RE...ml#including_a_mixin or medium.com/codeartisan/breakpoints-and-m...in-scss-46e8f551e2f2

There are couple of ways you can do the background thing.
1. You can do a page class suffix for homepage (on menu class) and write custom CSS.
2. You can copy a existing Astroid style and assign it to homepage only and customize it to fit your needs.

Thanks,
Chetan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The administrator has disabled public write access.

How to use bootstrap breakpoints in custom scss? 1 year 6 months ago #13868

I did it by import solution. Success.
@import "../bootstrap/_functions";
@import "../bootstrap/_variables";
@import "../bootstrap/mixins/_breakpoints";
But I am not familiar with astroid framework scss rules. There are astoid, zero and bootstrap folders in scss folder and there are so many rules. And I thought that all bootstrap functions already included.
I have feeling that there are some developer rules, preset of styles in scss to not to do double rules of white text colour etc.
You can do a page class suffix for homepage (on menu class) and write custom CSS.
Thanks bro. I understood that there is no need to change layout. Suffix is the best way.
You can copy a existing Astroid style and assign it to homepage only and customize it to fit your needs.
Please. can you give more detailed. Where I should fine the existing Astroid styles and read about it?
Last Edit: 1 year 6 months ago by Drainslavoch.
The administrator has disabled public write access.

How to use bootstrap breakpoints in custom scss? 1 year 6 months ago #13869

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Posts: 4153
  • Thank you received: 609
  • Karma: 108
Glad the SCSS thing worked out, I am not familer with the rules either (if there are any).

Joomla templates, when installed is considered a style and you can create multiple copies (of styles) and assign them to different menu items. Here is more on it: docs.joomla.org/Template_style

thanks,
Chetan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The administrator has disabled public write access.

How to use bootstrap breakpoints in custom scss? 4 months 2 weeks ago #23009

  • Chacapamac
  • Chacapamac's Avatar
  • Offline
  • Elite Member
  • Posts: 166
  • Thank you received: 4
  • Karma: 0
[Old post but so important to get right.

Directly from SASS;

@import
sass-lang.com/documentation/at-rules/import

⚠️ Heads up!
The Sass team discourages the continued use of the @import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the @use rule instead.

What’s Wrong With @import?
The @import rule has a number of serious issues:
• @import makes all variables, mixins, and functions globally accessible. This makes it very difficult for people (or tools) to tell where anything is defined.
• Because everything’s global, libraries must prefix to all their members to avoid naming collisions.
• @extend rules are also global, which makes it difficult to predict which style rules will be extended.
• Each stylesheet is executed and its CSS emitted every time it’s @imported, which increases compilation time and produces bloated output.
• There was no way to define private members or placeholder selectors that were inaccessible to downstream stylesheets.
The new module system and the @use rule address all these problems.

How Do I Migrate?
We’ve written a migration tool that automatically converts most @import-based code to @use-based code in a flash. Just point it at your entrypoints and let it run!

// style.scss
@import 'foundation/code', 'foundation/lists';

==================================
@use
sass-lang.com/documentation/at-rules/use
The simplest @use rule is written @use "<url>", which loads the module at the given URL. Any styles loaded this way will be included exactly once in the compiled CSS output, no matter how many times those styles are loaded.

A stylesheet’s @use rules must come before any rules other than @forward, including style rules. However, you can declare variables before @use rules to use when configuring modules.

// style.scss
@use 'foundation/code';
@use 'foundation/lists';

==================================

Sadly, so far, I was unable to use @use in my custom SCSS ? — Give an compile error
@use '../bootstrap/mixins/_breakpoints';

— I suspect that the @use file (breakpoints) need to be convert:
How Do I Migrate?
We’ve written a migration tool that automatically converts most @import-based code to @use-based code in a flash. Just point it at your entrypoints and let it run!

Can you guys confirm this, I will try again ?
We need to find a clean solution here.
The administrator has disabled public write access.

How to use bootstrap breakpoints in custom scss? 4 months 2 weeks ago #23010

  • Chacapamac
  • Chacapamac's Avatar
  • Offline
  • Elite Member
  • Posts: 166
  • Thank you received: 4
  • Karma: 0
*************UPDATE*****************
@use ../bootstrap/mixins/_breakpoints.scss

SEEM TO WORK PERFECTLY :silly:
Last Edit: 4 months 2 weeks ago by Chacapamac.
The administrator has disabled public write access.
Moderators: chandandeep
Time to create page: 0.377 seconds