精华内容
下载资源
问答
  • @import导入cssFrom any CSS file you can import another CSS file using the @import directive. 从任何CSS文件中,您都可以使用@import指令导入另一个CSS文件。 Here is how you use it: 使用方法如下: @...

    @import导入css

    From any CSS file you can import another CSS file using the @import directive.

    从任何CSS文件中,您都可以使用@import指令导入另一个CSS文件。

    Here is how you use it:

    使用方法如下:

    @import url(myfile.css)

    url() can manage absolute or relative URLs.

    url()可以管理绝对或相对URL。

    One important thing you need to know is that @import directives must be put before any other CSS in the file, or they will be ignored.

    您需要知道的一件事是@import指令必须放在文件中的任何其他CSS之前,否则它们将被忽略。

    You can use media descriptors to only load a CSS file on the specific media:

    您可以使用媒体描述符在特定媒体上仅加载CSS文件:

    @import url(myfile.css) all;
    @import url(myfile-screen.css) screen;
    @import url(myfile-print.css) print;

    翻译自: https://flaviocopes.com/css-import/

    @import导入css

    展开全文
  • CSS: css中的@import是为了开发者能将css分解成更小的部分,它的引入会直接发起一个HTTP的请求。 SCSS预编译: scss的@import则更加像我们使用的import等模块化的东西,它是直接将代码包含进目标SCSS文件,而不会...

    CSS: css中的@import是为了开发者能将css分解成更小的部分,它的引入会直接发起一个HTTP的请求。

    SCSS预编译: scss的@import则更加像我们使用的import等模块化的东西,它是直接将代码包含进目标SCSS文件,而不会产生额外的http请求。

    展开全文
  • Sass 支持所有的 CSS3 @-Rules,以及 Sass 特有的 “指令”...通常,@import寻找 Sass 文件并将其导入,但在以下情况下,@import仅作为普通的 CSS 语句,不会导入任何 Sass 文件。 文件拓展名是.css; ...

    Sass 支持所有的 CSS3 @-Rules,以及 Sass 特有的 “指令”(directives)

    1.@import

    @import 的功能,允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

    通常,@import 寻找 Sass 文件并将其导入,但在以下情况下,@import 仅作为普通的 CSS 语句,不会导入任何 Sass 文件。

    • 文件拓展名是 .css
    • 文件名以 http:// 开头;
    • 文件名是 url()
    • @import 包含 media queries。

    如果不在上述情况内,文件的拓展名是 .scss 或 .sass,则导入成功。没有指定拓展名,Sass 将会试着寻找文件名相同,拓展名为 .scss 或 .sass 的文件并将其导入。

    @import "foo.scss";
    

    @import "foo";
    

    都会导入文件 foo.scss

    2. @media

    .sidebar {
      width: 300px;
      @media screen and (orientation: landscape) {
        width: 500px;
      }
    }
    

    编译为

    .sidebar {
      width: 300px; 
    }
    @media screen and (orientation: landscape) {
      .sidebar {
        width: 500px; 
      } 
    }
    

    @media 的 queries 允许互相嵌套使用,编译时,Sass 自动添加 and

    @media screen {
      .sidebar {
        @media (orientation: landscape) {
          width: 500px;
        }
      }
    }
    

    编译为

    @media screen and (orientation: landscape) {
      .sidebar {
        width: 500px; 
       } 
    }
    

    @media 甚至可以比如变量,函数,以及运算符,代替条件的名称或者值:

    $media: screen;
    $feature: -webkit-min-device-pixel-ratio;
    $value: 1.5;
    
    @media #{$media} and ($feature: $value) {
      .sidebar {
        width: 500px;
      }
    }
    

    编译为

    @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
      .sidebar {
        width: 500px; 
      } 
    }

     3. @extend 继承

     Sass 将一个选择器下的所有样式继承给另一个选择器

    这个非常好用,通常会有两个类选择器的样式基本相同,第二个只是比第一个选择器多点样式,原来的方案要么写两遍,要么在一个html标签上写两个选择器。

    使用 @extend 可以避免上述情况

    .error {
      border: 1px #f00;
      background-color: #fdd;
    }
    .seriousError {
      @extend .error;
      border-width: 3px;
    }

    编译后

    .error, .seriousError { border: 1px #f00; background-color: #fdd; }
    
    .seriousError { border-width: 3px; }

    Class 选择器并不是唯一可以被延伸 (extend) 的,Sass 允许延伸任何定义给单个元素的选择器,比如 .special.coola:hover 或者 a.user[href^="http://"]

     

    同 class 元素一样,a:hover 的样式将继承给 .hoverlink

    .hoverlink {
      @extend a:hover;
    }
    a:hover {
      text-decoration: underline;
    }
    

    编译为

    a:hover, .hoverlink {
      text-decoration: underline; 
    }

    4.定义混合指令 @mixin

    混合指令(Mixin)用于定义可重复使用的样式,避免了使用无语意的 class,比如 .float-left。混合指令可以包含所有的 CSS 规则,绝大部分 Sass 规则,甚至通过参数功能引入变量,输出多样化的样式。

    混合指令的用法是在 @mixin 后添加名称与样式,比如名为 large-text 的混合通过下面的代码定义:

    @mixin large-text {
      font: {
        family: Arial;
        size: 20px;
        weight: bold;
      }
      color: #ff0000;
    }
    

    混合也需要包含选择器和属性,甚至可以用 & 引用父选择器:

    @mixin clearfix {
      display: inline-block;
      &:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
      * html & { height: 1px }
    }

    5. 引用混合样式 @include

    使用 @include 指令引用混合样式,格式是在其后添加混合名称,以及需要的参数(可选):

    .page-title {
      @include large-text;
      padding: 4px;
      margin-top: 10px;
    }
    

    编译为

    .page-title {
      font-family: Arial;
      font-size: 20px;
      font-weight: bold;
      color: #ff0000;
      padding: 4px;
      margin-top: 10px; 
    }
    

    也可以在最外层引用混合样式,不会直接定义属性,也不可以使用父选择器。

    @mixin silly-links {
      a {
        color: blue;
        background-color: red;
      }
    }
    @include silly-links;
    

    编译为

    a {
      color: blue;
      background-color: red; 
    }
    

    混合样式中也可以包含其他混合样式,比如

    @mixin compound {
      @include highlighted-background;
      @include header-text;
    }
    @mixin highlighted-background { background-color: #fc0; }
    @mixin header-text { font-size: 20px; }
    

    混合样式中应该只定义后代选择器,这样可以安全的导入到文件的任何位置

    参数用于给混合指令中的样式设定变量,并且赋值使用。在定义混合指令的时候,按照变量的格式,通过逗号分隔,将参数写进圆括号里。引用指令时,按照参数的顺序,再将所赋的值对应写进括号:

    @mixin sexy-border($color, $width) {
      border: {
        color: $color;
        width: $width;
        style: dashed;
      }
    }
    p { @include sexy-border(blue, 1in); }
    

    编译为

    p {
      border-color: blue;
      border-width: 1in;
      border-style: dashed; 
    }
    

    混合指令也可以使用给变量赋值的方法给参数设定默认值,然后,当这个指令被引用的时候,如果没有给参数赋值,则自动使用默认值:

    @mixin sexy-border($color, $width: 1px) {
      border: {
        color: $color;
        width: $width;
        style: dashed;
      }
    }
    p { @include sexy-border(blue); }
    h1 { @include sexy-border(blue, 2px); }
    

    编译为

    p {
      border-color: blue;
      border-width: 1px;
      border-style: dashed; 
    }
    
    h1 {
      border-color: blue;
      border-width: 2px;
      border-style: dashed; 
    }

    混合指令也可以使用关键词参数,上面的例子也可以写成:

    p { @include sexy-border($color: blue); }
    h1 { @include sexy-border($color: blue, $width: 2in); }
    

    虽然不够简明,但是阅读起来会更方便。关键词参数给函数提供了更灵活的接口,以及容易调用的参数。关键词参数可以打乱顺序使用,如果使用默认值也可以省缺,另外,参数名被视为变量名,下划线、短横线可以互换使用。

     

    参数变量 

    有时,不能确定混合指令需要使用多少个参数,比如一个关于 box-shadow 的混合指令不能确定有多少个 'shadow' 会被用到。这时,可以使用参数变量  声明(写在参数的最后方)告诉 Sass 将这些参数视为值列表处理:

    @mixin box-shadow($shadows...) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
    }
    .shadows {
      @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
    }
    

    编译为

    .shadowed {
      -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
      -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
      box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
    }
    

    参数变量也可以用在引用混合指令的时候 (@include),与平时用法一样,将一串值列表中的值逐条作为参数引用:

    @mixin colors($text, $background, $border) {
      color: $text;
      background-color: $background;
      border-color: $border;
    }
    $values: #ff0000, #00ff00, #0000ff;
    .primary {
      @include colors($values...);
    }
    

    编译为

    .primary {
      color: #ff0000;
      background-color: #00ff00;
      border-color: #0000ff;
    }

     

    基本也就这些常用,如果发现错误解决不了,我的建议就是以前你怎么写的css你就怎么写肯定没错。当然有空去探个真相才是王道。 

     

     

    展开全文
  • 1、CSS中原生的@import指令两大弊端 (1)需要放在代码最前边 (2)对性能不利,容易造成渲染阻塞 2、

    1、CSS中原生的@import指令两大弊端

    (1)需要放在代码最前边

    (2)对性能不利,容易造成渲染阻塞

    2、

    展开全文
  • @import注解

    2020-09-26 11:09:45
    @import是Spring的一个底层注解。 在应用中,有时没有把某个类注入到IOC容器中,但在运用的时候需要获取该类对应的bean,此时就需要用到@Import注解。 有一个Person类,且未注入容器: Class Person{ public void ...
  • @Import注解 @Import是Spring基于 Java 注解配置的主要组成部分。@Import注解提供了@Bean注解的功能,同时还有原来Spring基于 xml 配置文件里的<import>标签组织多个分散的xml文件的功能,当然在这里是组织多...
  • @Import与ImportSelector

    2019-10-27 21:54:39
    @Import与ImportSelector 为什么只需要加上@EnableTransactionManagement就开启注解式事务,点进源码,发现一个重要的注解@Import @Target(ElementType.TYPE) @Retention(RetentionPolicy.RUNTIME) @Documented @...
  • Spring全解系列 - @Import注解

    千次阅读 2020-06-09 20:17:01
    @Import注解 @Import是Spring基于 Java 注解配置的主要组成部分。@Import注解提供了@Bean注解的功能,同时还有原来Spring基于 xml 配置文件里的<import>标签组织多个分散的xml文件的功能,当然在这里是组织多...
  • SpringBoot 的 @Import 用于将指定的类实例注入之Spring IOC Container中。public class Name{ } @Component @Import({Name.class}) /** *使用Import 将指定的类的实例注入至Spring 容器中 */ public class ...
  • SpringBoot 的 @Import 用于将指定的Configuration类实例注入之Spring IOC Container中 Spring说,你不必将所有的@Configuration放到一个类里面,@Import注解可以用于导入其他的@Configuration类。 或者,你使用@...
  • 文章目录1. @Import 详解1.1 @Import 的作用1.2 @Import 的使用方式2. @Import 注册目标类的流程 1. @Import 详解 1.1 @Import 的作用 1.2 @Import 的使用方式 2. @Import 注册目标类的流程
  • HTML网页设计中 link 和 @import 的区别

    万次阅读 2020-04-28 21:27:24
    HTML网页设计中 link 和 @import ...页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import。外部引用CSS两种方式link和@import的方式分别是:
  • 关于link和@import的区别

    千次阅读 2020-07-27 10:55:12
    关于link和@import的区别 1. 兼容性不同 link是XHTML的标签,无兼容性问题;@import是在CSS2.1时候提出的,由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别 2.适用性不同 link标签...
  • sass的导入@import

    万次阅读 2018-05-18 16:07:23
    css3的@import,在css样式表之中使用绝对或相对地址指定导入的外部样式表文件。 如:@import url(&amp;quot;style/index.css&amp;quot;); css3中的@import可能会造成延迟加载,有的地方没有样式。 sass @...
  • Less的@import指令

    千次阅读 2017-11-21 08:59:34
    Less的@import指令 Less中,可以通过 @import指令来导入外部文件。@import指令可以放在代码中的任何位置,导入文件时的处理方式取决于文件的扩展名: 如果扩展名是 .css,文件内容将被原样输出。如果是任何其他...
  • @Import注解

    万次阅读 2017-07-11 19:34:47
    @Import注解就是之前xml配置中的import标签,可以用于依赖第三方包中bean的配置和加载 在4.2之前只支持导入配置类 在4.2,@Import注解支持导入普通的java类,并将其声明成一个bean public class DemoService { ...
  • @import 错误用法

    2019-09-15 18:11:01
    @import'xxx.less'; @import 'xxxx.less'; 两者区别: 前者import后无空格。 后者import后有空格。 共同点:两者的引入都不会报错。 不同点:前者不会编译成less,后者可以成功编译转成less。 ...
  • 在spring-boot中随处可以见的就是@Import,它的作用就是通过导入的方式把实例注入到IOC中,本文主要介绍下@Import的用法。 知识点回顾: 给IOC容器中注册Bean的方式: 包扫描+组件标注注解(@Controller/@Service...
  • 概述:@Import注解是引入java类: 导入@Configuration注解的配置类(4.2版本之前只可以导入配置类,4.2版本之后也可以导入普通类) 导入ImportSelector的实现类 导入ImportBeanDefinitionRegistrar的实现类 @...
  • @Import注解须知 1、@Import只能用在类上 ,@Import通过快速导入的方式实现把实例加入spring的IOC容器中 2、加入IOC容器的方式有很多种,@Import注解就相对很牛皮了,@Import注解可以用于导入第三方包 ,...
  • @Import注解用来帮助我们把一些需要定义为Bean的类导入到IOC容器里面。下面我们就对@Import注解的使用做一个简单的总结。 一 @Import引入普通类        @Import引入普通的类可以帮助我们把普通...
  • @import和link的区别

    千次阅读 2019-06-20 14:50:59
    link引入的css在加载页面时同时加载,而@import中的css要在页面加载完毕后加载 从属关系 link是HTML提供的标签 @import是css的语法规则,只能加载在style标签内和css文件中 兼容性 @import是css2.1时提出的,...
  • link和@import的区别

    千次阅读 2016-11-23 11:33:29
    link属于html标签,而@import是css提供的。 页面被加载时,link会同时被加载,而@import引用的css会等到页面加载结束后加载。 link是html标签,因此...@import的书写方式@import 'style.css' //Windows IE4/ NS4, Mac
  • SpringBoot @Import 详解

    千次阅读 2018-05-06 11:54:26
    SpringBoot 的 @Import 用于将指定的类实例注入之Spring IOC Container中。 SpringBoot 提供了 三种使用 @Import 将 类实例注入至 Spring IOC Container中 的实例。直接注入实现 ImportBeanDefinitionRegistrar ...
  • import与@import的区别

    千次阅读 2017-09-08 14:21:29
    前端面试秘籍,欢迎star!...style中的@import是stylus的语法(没用过stylus, 不知道引用文件是不是@import) 也就是在css中引用css文件, 就像saas那样理论上效果都是一样的, 都是将依赖的文件在打包的时候一块打包进去 ...
  • @import注解与@ImportResource注解

    千次阅读 2018-04-26 13:52:48
    @Import注解就是之前xml配置中的import标签,可以用于依赖第三方包中bean的配置和加载@ImportResource是引入spring配置文件.xml在4.2之前只支持导入配置类在4.2,@Import注解支持导入普通的java类,并将其声明成一个...
  • 1 背景介绍 我们在开发SpringBoot项目时会引用很多功能包,常会看到@Enable*注解[1]。例如使用Spring StateMachine中@EnableStateMachine注解启用状态机相关能力。...通过@Import注解实现了@Enable*的...
  • SpringBoot @Import

    2019-07-11 10:15:28
    SpringBoot 的 @Import 用于将指定的类实例注入之Spring IOC Container中。 A.java(无任何属性和实现) public class A { } B.java(无任何属性和实现) public class B { } ImportDirect.java import ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 147,552
精华内容 59,020
关键字:

@import