$ icon-font-path hoạt động như thế nào trong bootstrap scss?

Question

Gần đây tôi đã bắt đầu sử dụng SCSS bootstrap trên dự án nút của tôi. Vì vậy, tôi có app/bower_components/bootstrap-sass/lib/_glyphicons.scss chẳng hạn.

Nhìn ra CSS của tôi, tôi thấy những thứ như:

@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/some\/path\/project\/app\/bower_components\/bootstrap-sass\/lib\/_normalize\.scss}line{font-family:\0000332}} 
audio, 
canvas, 
video { 
    display: inline-block; 
} 

Tôi có 2 câu hỏi:

1. Điều này có vẻ giống như một lỗ hổng bảo mật. Mọi người có thể suy ra điều gì đó về hệ điều hành và cấu trúc thư mục của tôi chỉ đơn giản bằng cách nhìn vào CSS của tôi. Cách chính xác để đóng lỗ hổng bảo mật này là gì?
2. Tính năng này hoạt động như thế nào? Tôi gần như đã nhận ra nó, nhưng tôi đang thiếu một cái gì đó. Nhìn vào SCSS, tôi thấy bootstrap đang sử dụng $icon-font-path mà dường như biến thành con đường tuyệt đối này. Nhìn vào compass documentation, tôi thấy họ cung cấp giá trị tuyệt đối nhưng không $icon-font-path

Đây là đoạn mã tôi đề cập đến:

@font-face { 
    font-family: 'Glyphicons Halflings'; 
    src: url('#{$icon-font-path}#{$icon-font-name}.eot'); 
    src: url('#{$icon-font-path}#{$icon-font-name}.eot?#iefix') format('embedded-opentype'), 
     url('#{$icon-font-path}#{$icon-font-name}.woff') format('woff'), 
     url('#{$icon-font-path}#{$icon-font-name}.ttf') format('truetype'), 
     url('#{$icon-font-path}#{$icon-font-name}.svg#glyphicons-halflingsregular') format('svg'); 
} 

Answer 1

Sự lộn xộn là "ánh xạ nguồn", vì vậy công cụ nhà phát triển trình duyệt có thể hiển thị cho bạn số dòng gốc và tên tệp của quy tắc Sass đã tạo CSS đó (thay vì số dòng cho CSS được tạo).

Firebug có plugin FireSass hiểu các chú thích này. Tôi nghĩ rằng Chrome có hỗ trợ tích hợp nhưng có thể nằm sau cờ thử nghiệm.

Nó có không có gì để làm với phông chữ; font-family chỉ được sử dụng vì đây là cách dễ dàng để chuyển chuỗi thành CSS theo cách mà JavaScript vẫn có thể truy cập được mà không ảnh hưởng đến việc hiển thị tài liệu. Nó cũng có không có gì để làm với Bootstrap; đây là một phần của trình biên dịch scss.

Nó sẽ không có trong đầu ra nén, mà tôi hy vọng bạn đang sử dụng trong sản xuất. :)

Answer 2

Here is the variables file nơi họ đặt biến $icon-font-path.

Có vẻ như $icon-font-path được đặt thành tên người dùng của các tệp phông chữ. không nhất thiết phải là một lỗ hổng bảo mật vì nó là một đường dẫn tương đối với các phông chữ.

Answer 3

Cả hai câu trả lời là chính xác. Tóm lại, không có magic. Bootstrap khởi tạo $icon-font-path với giá trị mặc định.

nếu bạn include bootstrap's SCSS trong trình quản lý yêu cầu giá trị khác nhau cho $icon-font-path bạn cũng nên ghi đè giá trị mặc định của chúng.

Cú pháp $icon-font-path: some_value !default; có nghĩa là - sử dụng giá trị này nếu chưa được đặt.

Vì vậy, khi bạn bao gồm bạn nên làm như sau

/* override icon-font-path value and include scss */ 
$icon-font-path: bower_components/bootstrap/fonts; 
@include bower_components/bootstrap/bootstrap.scss; 

đường dẫn có thể khác nhau trong các tình huống thực.

Đây có vẻ là cơ chế tiêu chuẩn để xuất bản mô-đun SCSS có thể tái sử dụng.

Answer 4

@guy mograbi: Trong Bootstrap-Sass-3.3.6, $ icon-font-đường dẫn trong /bootstrap/bootstrap/_variables.scss @83 được khai báo như thế này:

$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;

Từ $ bootstrap-sass-tài sản-helper không được định nghĩa chưa , có thể hữu ích khi bao gồm _variables.scss trước khi ghi đè lên biểu tượng $-include-path, vì vậy chúng ta có thể đọc "settings" và ghi đè lên $ icon-font-path cùng với các trường hợp if().

Chúng ta có thể sử dụng một cái gì đó như:

@include bower_components/bootstrap/bootstrap/_variables.scss; 
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "/fonts/bootstrap/"); 
@include bower_components/bootstrap/bootstrap.scss;